如何在li上顯示隱藏的div：懸停？

我有一個php頁面顯示來自mysql的查詢結果。此結果顯示在無序列表<li>中。我還有一個div，最初隱藏在每個<li>標記內，應該在懸停時顯示。我已經試過這個使用jQuery這個：如何在li上顯示隱藏的div：懸停？

$('#results li').mouseover(function() { 
    $('.theoption').show(); 
}).mouseleave(function() {$('.theoption').hide()});

這顯示隱藏的div。問題是它同時在所有<li>標籤上顯示。如何更改代碼，以便div僅顯示在當前懸停的<li>上？

非常感謝。

來源

2011-11-01 Saint Dee

是L1標籤裏面的DIV？ – Neal

請給我們展示一些生成的標記，細節非常重要，並且從描述中不清楚。 – roryf

如果DIV是內 LI標記，你可以使用純醇」 CSS：

#results li:hover div.theoption { 
    display: block; 
}

或者jQuery中：

$('#results li').hover(function(){ 
    $('.theoption', this).show(); //find the div INSIDE this li 
},function(){ 
    $('.theoption', this).hide(); 
});

來源

2011-11-01 13:50:27 Neal

這個工程。非常感謝你 –

如果你的div不在LI裏面，他們可能應該是。然後尼爾的解決方案將工作。重要的是要理解的是雙參數選擇器。第一個是目標，但逗號之後是上下文。根據評論代碼，「在這個懸停元素（LI）中查找.theoption –

@SaintShann如果這個解決方案可以工作，你應該在提問時更加精確！ – Teneff

$('#results li').mouseover(function() { 
    $(this).find('.theoption').show(); 
}).mouseout(function() { 
    $(this).find('.theoption').hide(); 
});

來源

2011-11-01 13:51:15 Blazemonger

如果<div>是旁邊<li>您還可以使用純CSS：

#results li:hover + div.theoption { 
    display: block; 
}

CSS 2 - Partern Matching

如果你堅持使用jQuery這就是它如何做到：

$('#results li').hover(function(){ 
    $(this).next().show(); 
}, function(){ 
    $(this).next().hide(); 
});

來源

2011-11-01 13:54:38 Teneff

如何在li上顯示隱藏的div：懸停？

回答

相關問題