javascript - 为什么 onmouseover 和 onclick 不能一起设置 div 样式以及如何重置 onclick 设置样式而不丢失 onmouseover 的样式？

Question

首先，我必须说我处于非常基础的编程水平。这些问题的答案对某些人来说可能非常明显，但我就是想不出一种方法将所有这些放在一起。提前致谢。

我有这个 HTML 代码:

<div id="vectores" class="categoria" onclick="this.style.color='#000'; this.style.textDecoration='underline'; mostraVectores('vectores0','vectores')" onmouseover="this.style.color='#000'; this.style.textDecoration='underline'" onmouseout="this.style.color='#999'; this.style.textDecoration='none'">Tema 1. Mec&aacute;nica vectorial</div>
    <div id="vectores0" class="subcategoria"></div>

我在这里使用“onclick”来使样式的更改“永久”，因为我希望它成为一个“菜单选项”，并且我希望它触发功能，但也改变它的外观，以便它可以很容易得知是否已被选中。我使用“onmouseover”让用户始终知道指针“即将选择”什么(菜单有更多选项)。

问题似乎是他们无法一起工作。我想这只是因为一旦通过 'onmouseover' 设置了新样式，如果第二个事件 (onclick) 要求，编译器就不会再次为 div 设置相同的样式。

这是该类的 CSS 代码:

.categoria{
color:#999;
font-weight:bold;
padding:2px;
padding-left:10px;
cursor:pointer;
}

然后我想使用单独的 javascript 页面和如下功能来“永久”更改样式:

function mostraVectores(cosa1,cosa2){

document.getElementById(cosa1).style.display="block";

document.getElementById('equilibrio').style.color="#999";
document.getElementById('estructuras').style.color="#999";
document.getElementById('centros').style.color="#999";
document.getElementById('momento').style.color="#999";
document.getElementById('inercia').style.color="#999";
document.getElementById('rozamiento').style.color="#999";

document.getElementById('equilibrio').style.textDecoration="none";
document.getElementById('estructuras').style.textDecoration="none";
document.getElementById('centros').style.textDecoration="none";
document.getElementById('momento').style.textDecoration="none";
document.getElementById('inercia').style.textDecoration="none";
document.getElementById('rozamiento').style.textDecoration="none";

document.getElementById(cosa2).style.color="#000";
document.getElementById(cosa2).style.textDecoration="underline";

}

正如你所看到的，这里还有其他“菜单选项”，我想将它们变成灰色并且没有下划线(因为它们最初是根据CSS)，以防这个函数在其他函数之后执行，这样当用户从一个主题切换到另一个主题时，他不会以两个“类似选择”的菜单选项结束。问题是，通过这种方式“重置”样式，div 中的“onmouseover/onmouseout”将停止工作。

如何解决这个问题？

Answer 1

您需要的方法是使用 CSS :hover 并在单击时分配一个类。

HTML

<div id="vectores" class="categoria" onclick="mostraVectores('vectores0','vectores')">Tema 1. Mec&aacute;nica vectorial</div>
    <div id="vectores0" class="subcategoria"></div>

CSS

.categoria {
    color: #999;
    font-weight: bold;
    padding: 2px;
    padding-left: 10px;
    cursor: pointer;
}

.categoria:hover { /* This is applied on mouseover and removed on mouseout */
    color: #000;
    text-decoration: underline;
}

.categoria.active { /* Not sure what you want when clicked */
    color: #900;
    text-decoration: underline;
}

JS

function mostraVectores(cosa1,cosa2){
    //add this to your function
    this.className += " active";