javascript 在鼠标悬停时更改不同的 div 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8917823/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change a different div's class on mouseover
提问by elzi
There's many examples of this but I can't find the right one for me - I believe mine is a more simple example.
有很多这样的例子，但我找不到适合我的例子——我相信我的例子更简单。
I have as follows:
我有以下几点：
<li onmouseover="this.className='change-here2'" onmouseout="this.className='change-here'">
<div class="change-here">
Text Here
</div>
</li>
The li element has a background image, and a hover effect that changes the background image.
li 元素具有背景图像和更改背景图像的悬停效果。
Using this.className changes the li class, when what I want is to change the div below it's class.
使用这个.className 会改变 li 类，当我想要的是改变它的类下面的 div 时。
Shouldn't I be able to modify thisto div.change-here, or something similar? I don't know the syntax...
我不应该能够修改这一来div.change，在这里，或类似的东西？我不知道语法...
Any help is appreciated.
任何帮助表示赞赏。
EDIT: TimWolla's solution works brilliantly. Thank you all.
编辑：TimWolla 的解决方案非常有效。谢谢你们。
回答by TimWolla
Why don't you use CSS only?
为什么不只使用 CSS？
li .class { background-color: red; }
li:hover .class { background-color: green; }
回答by Richard B
Can you do something to the affect of $(this).children(':first').addClass('change-here'); for that?
你能对 $(this).children(':first').addClass('change-here'); 的影响做些什么吗？为了那个原因？
回答by Silvertiger
Updated answer to incorporate all the suggestions
更新答案以包含所有建议
<style>
.div_1 {
color: #F00;
}
.div_2 {
color: #0F0;
}
</style>
<li onMouseOver="this.childNodes[0].className = 'div_1';" onMouseOut="this.childNodes[0].className = 'div_2';">
<div class="div_1">
Text Here
</div>
</li>
回答by David says reinstate Monica
May I suggest:
我可以建议：
var lis = document.getElementsByTagName('li');
for (var i=0, len=lis.length; i<len; i++){
lis[i].onmouseover = function(){
var firstDiv = this.getElementsByTagName('div')[0];
firstDiv.className = 'change-here';
};
lis[i].onmouseout = function(){
var firstDiv = this.getElementsByTagName('div')[0];
firstDiv.className = '';
};
}
The reason I'm taking this approach, rather than using the in-line onmouseoverattribute, is to make it somewhat easier to adapt in the case of the requirements changing at a later date. Also, it's slightly less 'intrusive' this way, and leaves the html somewhat easier to read. It is, of course a personal preference, though.
我之所以采用这种方法，而不是使用内联onmouseover属性，是为了在以后需求发生变化的情况下更容易适应。此外，这种方式的“侵入性”略低，并且使 html 更易于阅读。不过，这当然是个人喜好。
It's worth noting that the CSS-approach, as mentioned by TimWollais far more sensible than involving JavaScript.
值得注意的是，TimWolla提到的 CSS 方法比涉及 JavaScript 更明智。
回答by Blender
This should work:
这应该有效：
this.childNodes[0].className = 'change-here';
