Jquery 如何将一个div的悬停状态链接到另一个div中嵌套div的悬停状态？

期望的行为

当鼠标悬停在

.list\u 01\u item

上时，

.list\u 01\u item

的背景和视觉上相邻的

.list\u 02\u item

应该改变（使用jQuery或CSS解决方案）

jsFiddle

HTML

<div id="container">
<div id="list_01">
    <div class="list_01_item">value1</div>
    <div class="list_01_item">value1</div>
    <div class="list_01_item">value1</div><!-- the hover state of this -->
    <div class="list_01_item">value1</div>
</div>
<div id="list_02">
    <div class="list_02_item">value2</div>
    <div class="list_02_item">value2</div>
    <div class="list_02_item">value2</div><!-- is the same as this -->
    <div class="list_02_item">value2</div>
</div>
</div>

CSS

#container {
width:400px;
font-size:0; /*to get rid of intra column padding*/
}

#list_01 {
width:50%;
display:inline-block;
background: yellow;
}

.list_01_item:hover {
background:pink;
}

#list_02 {
width:50%;
display:inline-block;
background:aqua;
}

.list_01_item, .list_02_item {
font-size:14px; /*to override container font size*/
}

.hover {
    background-color: pink;
}

JavaScript

var item1 = $('#list_01 div');
var item2 = $('#list_02 div');

item1.hover(function() {
    item2.eq($(this).index()).toggleClass('hover');
});

---

您将一个悬停事件侦听器附加到列表1的div，然后在列表2中的项上切换class

hover

，该项的索引与触发事件的列表1中的元素的索引相同。

哇，太快了，谢谢，我刚刚开始研究

eq（）

和

index（）

，但您的版本要简洁得多。谢谢（编辑：作为参考，这里有另一个也有从右到左的列链接）。