Javascript 从另一个div更改multiples div类

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

这起作用了。只有一个div（第一个具有该ID的div）但它工作了，所以我尝试将其从ID更改为ClassName，但没有工作

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

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

作为参考，在我做的大量搜索中，我也尝试了这个链接 试着让它适应我的情况

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

没有结果

提前感谢您的帮助。

我建议：

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

参考资料：

我建议：

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

参考资料：
---

稍微欺骗一下你的标记，你可以用简单的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;
}

按钮a
按钮b


​​​​​
.a:悬停~li.项目a{
背景：红色；
}
.b:悬停~li.项目b{
背景：蓝色；
}

---

稍微欺骗一下你的标记，你可以用简单的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;
}

按钮a
按钮b


​​​​​
.a:悬停~li.项目a{
背景：红色；
}
.b:悬停~li.项目b{
背景：蓝色；
}

---

对于没有ID的元素，尝试使用

getElementById

是没有意义的。我应该更好地解释自己：我尝试将类更改为ID，尝试getElementById，结果成功了（对于第一个）。然而，这并不是我所需要的，因为我有多个div要更改，id必须是唯一的。这个例子是为了说明我尝试了一些部分有效的东西，并试图使其适应我的需要。无论如何，感谢您抽出时间尝试对没有ID的元素使用

getElementById

。我应该更好地解释自己：我尝试了将类更改为ID，尝试了getElementById，结果成功了（第一次）。然而，这并不是我所需要的，因为我有多个div要更改，id必须是唯一的。这个例子是为了说明我尝试了一些部分有效的东西，并试图使其适应我的需要。无论如何，谢谢你抽出时间来。真的很欢迎你，我很高兴能帮上忙！=）真的不客气，我很高兴能帮上忙！=）很好的解决方案。我现在可以用javascript来编写它，所以我不需要编辑所有的html，但我会保存它以备将来参考。谢谢：）很好的解决方案。我现在可以用javascript来编写它，所以我不需要编辑所有的html，但我会保存它以备将来参考。谢谢：）