Question

所需行为

当鼠标悬停在.list_01_item上时，.list_01_item的背景和视觉上相邻的.list_02_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*/
}

Answer 1

<强> Updated JSFiddle Link

<强> CSS

.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中的项目上切换类hover，该列表与触发事件的列表1中的元素具有相同的索引。

如何将div的悬停状态与另一个div中嵌套div的悬停状态相关联？

1 个答案: