hover add class on 2 li's

我有2个单独的ul列表，当我将鼠标悬停在任何列表中时，它需要添加类悬停 - 并与两个列表对应。hover add class on 2 li's

所以，如果我在任一列表将鼠标悬停在1里我想上课悬停同时添加到李的

如果你看看我得到了什么至今。我想要它，所以如果您将列表类中的任何一个相应的项目悬停，则会将其添加到这两个li中。而不是像我在小提琴上一样加入1个地方。

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

感谢

来源

2013-12-18 alexgomy

获取徘徊li的index并根据li添加/删除类找到。

$(".price-table-container li, .price-table-container .panel-two li").hover(function() { 
    var index = $(this).index(); 
    $(".price-table-container").find("ul").each(function(){ 
     $(this).find("li:eq("+index+")").addClass('hover'); 
    }); 
     }, function() { 
    var index = $(this).index(); 
    $(".price-table-container").find("ul").each(function(){ 
     $(this).find("li:eq("+index+")").removeClass('hover'); 
    }); 
});

Updated fiddle here.

来源

2013-12-18 17:32:42 Hiral

欢呼声。 – alexgomy

这里是另一种方式来解决这个问题，我们专门：

抓住当前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'); 
});

来源

2013-12-18 17:47:08 gibberish

略短版

$(".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');; 
});

Updated fiddle

从所有 li元素删除

来源

2013-12-18 17:53:29

hover add class on 2 li's

回答

相关问题