我有两个单独的ul列表,当我将li悬停在任一列表中时,它需要添加类悬停 - 并与两个列表对应。
因此,如果我将鼠标悬停在任一列表中的第一个li上,我想将类悬停添加到两个li的
如果你看看到目前为止我得到了什么。我想要它,所以如果你滚动列表类中的相应项目,hover会被添加到两个li中。而不是像在小提琴上那样只添加一个地方。
<div class="price-table-container">
<div class="panel-one">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="panel-two">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
$(".price-table-container .panel-one li, .price-table-container .panel-two li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
由于
答案 0 :(得分:1)
答案 1 :(得分:1)
以下是另一种解决问题的方法:
li
的索引号li
元素li
元素中删除 ->
jsFiddle Demo <-
var ndx, ol, $this;
$(".price-table-container .panel-one li, .price-table-container .panel-two li").hover(
function() {
$this = $(this);
ndx = $this.index();
ol = ($this.parent().parent().attr('class') == 'panel-one') ? 'panel-two' : 'panel-one';
$this.addClass('hover');
$('.'+ol).find('li:eq(' +ndx+ ')').addClass('hover')
},
function() {
$('li').removeClass('hover');
});
答案 2 :(得分:1)
略短的版本
$(".price-table-container .panel-one li, .price-table-container .panel-two li").hover(function() {
var index = $(this).index() + 1;
$('.price-table-container li:nth-child(' + index + ')').addClass('hover');
}, function() {
var index = $(this).index() + 1;
$('.price-table-container li:nth-child(' + index + ')').removeClass('hover');;
});