懸停在列表項上，只顯示一個項目而不是全部

您好我正在嘗試製作一個菜單，其中的項目顯示爲鼠標懸停。我對jQuery，CSS等頗爲陌生，我無法弄清楚我的問題是什麼。現在我確實讓我的div在懸停時顯示出來，而不是隻有一個顯示出來。懸停在列表項上，只顯示一個項目而不是全部

如何讓我懸停的物品的div標籤只顯示出來。

這裏是小提琴：

<ul class="navi"> 
    <li> <a class='light'> 
      Item1 
      <div class="hover-name" style="display:none"> 
       Businesses 
      </div> 
     </a> 

    </li> 
    <li> <a class='light'> 
      Item2 
      <div class="hover-name" style="display:none"> 
       Agencies 
      </div> 
     </a> 

    </li> 
    <li> <a class='light'> 
      Item3 
      <div class="hover-name" style="display:none"> 
       Billing Plans 
      </div> 
     </a> 

    </li> 
</ul>

http://jsfiddle.net/Samfr/

例如，如果我將鼠標懸停在項目1那麼只有企業將出現。項目2只機構現身

謝謝

來源

2014-02-12 James

http://jsfiddle.net/Samfr/2/ – OpenSorceress

您正在使用下面顯示的項目：

$('.hover-name').show();

這樣做是發現有一類.hover-name並執行的doucment內的一切show()功能就可以了。

所有你需要做的是改變顯示行是上下文感知：

$(this).find('.hover-name').show();

使用$(this).find('.hover-name')會發現你徘徊什麼比一類的.hover-name內的所有元素和顯示，而不是顯示所有這些。

此外，如果你想隱藏顯示的元素，當你移動了一個新的元素，你可以使用以下命令：

$('.navi > li a.light').hover(function() { 
    $('.hover-name').hide(); 
    $(this).find('.hover-name').show(); 
});

$('.hover-name').hide();會隱藏一切與類的.hover-name，然後顯示裏面的物品你目前結束的元素。

來源

2014-02-12 22:35:39

感謝您的非常詳細的回覆！幫助很多！ – James

解釋事情總是最好的，而不僅僅是解決問題。希望你能更好地理解正在發生的事情，而不是僅僅使用給出的解決方案。 –

此代碼會隱藏其它元素：

$('.navi > li a.light').hover(function() { 
    $(this).parent().parent().find('.hover-name').hide(); 
    $(this).find('.hover-name').show(); 
});

Fiddle

來源

2014-02-12 22:39:25

可以使用的情況下，這將返回已徘徊元素的currentTarget，並且可以使用要過濾以僅顯示該元素的懸停名稱：

$('.navi > li a.light').hover(function (e) { 
     $(e.currentTarget).find('.hover-name').show(); 
    });

（http://jsfiddle.net/Samfr/4/）

來源

2014-02-12 22:42:42 dule

懸停在列表項上，只顯示一個項目而不是全部

回答

相關問題