Question

有很多这方面的例子，但我找不到适合自己的例子 - 我相信我的是一个更简单的例子。

我有如下：

<li onmouseover="this.className='change-here2'" onmouseout="this.className='change-here'"> 
    <div class="change-here">
       Text Here
    </div>
</li>

li元素有一个背景图像和一个改变背景图像的悬停效果。

使用这个 .className更改li类，当我想要的是更改它的类下面的div。

我不应该能够将这个修改为div.change - here，或者类似的东西吗？我不知道语法......

感谢任何帮助。

编辑：TimWolla的解决方案非常出色。谢谢你们。

Answer 1

为什么不使用CSS？

li .class { background-color: red; }
li:hover .class { background-color: green; }

请参阅：http://jsfiddle.net/TimWolla/zp2td/

Answer 2

你能对$（this）.children（'：first'）的影响做些什么.addClass（'change-here'）;那个？

Answer 3

更新了包含所有建议的答案

<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>

Answer 4

我可以建议：

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 = '';
    };
}

JS Fiddle demo

我采用这种方法而不是使用内联onmouseover属性的原因是，在需求日后变化的情况下，使其更容易适应。而且，它稍微不那么具有侵入性＆＃39;这样，让html更容易阅读。不过，这当然是个人偏好。

值得注意的是，TimWolla提到的CSS方法比涉及JavaScript更为明智。

Answer 5

这应该有效：

this.childNodes[0].className = 'change-here';

在鼠标悬停时更改不同的div类

5 个答案: