Question

我试图使用另一个元素中的onmouseover函数将类名更改（更好的是添加）到多个div。这两个元素并没有相互嵌套，所以我不能（或者至少不认为）我可以使用普通的CSS来做到这一点。我简化了以下代码，使其更易于阅读。＆＃34;项目＆＃34;的实际html;有点嵌套。希望这不会成为一个问题

<ul id="buttons">
   <li class="a">button a</li>
   <li class="b">button b</li>
</ul>

<div id="items">
    <div class="item-a"></div>
    <div class="item-b"></div>
    <div class="item-b"></div>
    <div class="item-a"></div>
    <div class="item-b"></div>
</div>

基本上我想要做的就是当我将鼠标悬停在＆＃34; li＆＃34;使用鼠标的元素div中的相应类＆＃34; items＆＃34;得到一个类添加到自身（所以类＆＃34;按钮中的＆＃34;将添加一个类＆＃39;悬停＆＃39;到所有＆＃34; item-a＆＃34;类，等等）

我对javascript / jquery相当新。到目前为止，我设法使用Id而不是类来完成它，但由于ID必须是唯一的，它不是我需要的。代码是：

onmouseover="document.getElementById('item-a').className = 'hover';"

这很有用。只有一个div（第一个带有该ID），但它有效，所以我尝试将它从Id更改为ClassName但它没有工作

onmouseover="document.getElementsByClassName('item-a').className = 'hover';"

并且，如果上面的代码可以工作，它会改变类，而我更喜欢添加它（然后用onmouseout函数删除它）

供参考，在我搜索的很多内容中，我也试过这个链接 Trigger the css:hover event with js 试图让它适应我的情况

$(window).load(function() {
 $('.a').hover(function(){
    $('.item-a').addClass('hover');
});
}

没有结果。

提前感谢您的帮助。

Answer 1

我建议：

$('#buttons li').hover(function(){
    $('.item-' + this.className).addClass('hover');
},
function(){
    $('.item-' + this.className).removeClass('hover');
});

JS Fiddle demo

参考文献：

Answer 2

稍微调整你的标记，你可以使用纯CSS：

<ul id="buttons">
   <li class="a">button a</li>
   <li class="b">button b</li>
   <li class="items">
       <div class="item-a"></div>
       <div class="item-b"></div>
       <div class="item-b"></div>
       <div class="item-a"></div>
       <div class="item-b"></div>
   </li>
</ul>

.a:hover ~ li .item-a {
    background: red;
}

.b:hover ~ li .item-b {
    background: blue;
}

Demo

从另一个div更改多个div类

2 个答案: