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

回答

相關問題