为什么onmouseover和onclick不能一起工作，设置div样式，以及如何在不丢失onmouseover的情况下重置onclick设置样式？
为什么onmouseover和onclick不能一起工作，设置div样式，以及如何在不丢失onmouseover的情况下重置onclick设置样式？
提问于 2013-10-22 00:16:12
首先，我必须说，我处于一个非常基本的编程水平。这些问题的答案对一些人来说可能是显而易见的，但我只是想不出一种把所有这些都结合起来的方法。提前谢谢。
我有这个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ánica vectorial</div>
<div id="vectores0" class="subcategoria"></div>我在这里使用'onclick‘在样式“永久”中进行这个更改，因为我希望它是一个“菜单选项”，我希望它触发函数，但也改变它的外观，这样就可以很容易地判断它是否被选中了。我一直使用'onmouseover‘来让用户知道指针“将要选择”什么(菜单有更多的选项)。
问题似乎是他们不愿合作。我想这仅仅是因为一旦'onmouseover‘设置了新样式，编译器就不会再次为div设置相同的样式，如果第二个事件(onclick)请求它的话。
下面是该类的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‘停止工作。
我该怎么解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-10-22 01:27:45
您需要的方法是使用CSS :hover并在单击时分配一个类。
HTML
<div id="vectores" class="categoria" onclick="mostraVectores('vectores0','vectores')">Tema 1. Mecá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";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19512545
复制
相似问题
使用onClick和onMouseOver事件更新样式
Javascript onClick和onmouseover以及onmouseOut
设置JavaScript onmouseover警报的样式
让onMouseOver和onClick工作的问题
如何使用'onmouseover‘和'onclick’事件改变样式表？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
