1

我正在尝试使用另一个元素中的 onmouseover 函数将类名更改（最好是添加）多个 div 。这两个元素没有相互嵌套，所以我不能（或至少不）认为我可以使用纯 CSS 来做到这一点。我正在简化以下代码以使其更易于阅读。“项目”的实际 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>

所以基本上我想要做的是当我用鼠标悬停“li”元素时，div“items”中的相应类将一个类添加到自身（因此按钮中的类“a”会添加一个类“悬停”到所有“item-a”类，等等）。

我对 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');
});
}

没有结果。

提前感谢您的帮助。

4

2 回答 2

4

我建议：

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

JS 小提琴演示。

参考：

于 2012-12-23T13:24:59.713 回答
1

稍微调整一下你的标记，你可以用纯 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;
}

演示

于 2012-12-23T13:42:19.967 回答