jQuery隱藏div使用懸停顯示所有隱藏的div

我確定它已被問，但我找不到解決我的問題。我有一個在3個div上命名相同的類。這個類正在使用css隱藏。問題是，當我將鼠標懸停在1個div上時，所有3個同時顯示隱藏。我只想要我展示的元素。我想我應該使用.each（），但我不確定它是如何融合在一起的。jQuery隱藏div使用懸停顯示所有隱藏的div

CSS

.background-hover { 
    display: none;

HTML：

<div class="home-get-started"> 
    <-- first--><div class="home-get-started"> 
      <!-- image--> 
      <img src="image.png"> 
       <!-- hover hidden state -->    
       <div class="background-hover"> 
       <div class="home-btn">Text</div> 
       </div> 
      </div> 

<--second --> <div class="home-get-started"> 
      <!-- image--> 
      <img src="image.png"> 
       <!-- hover hidden state -->    
       <div class="background-hover"> 
       <div class="home-btn">Text</div> 
       </div> 
      </div> 
    </div>

的jQuery：

$(".home-get-started").hover(
function() { $('.background-hover').css({"display":"block"}); }, 
function() { $('.background-hover').css({"display":"none"}); } 
);

來源

2013-05-09 tDiesel

的可能重複的[顯示獨立地使用各方法單個元件]（http://stackoverflow.com/questions/16471954/show-individual-elements-independently-using-each-method） – 2013-05-09 23:19:11

你是顯示/隱藏與background-hover類的所有元素。你可能想要做的僅僅是觸發事件的元素的後代...

你可以使用find()來查詢某個元素的後代的DOM（在我們的例子中爲this）。

$(".home-get-started").hover(
    function() { $(this).find('.background-hover').show(); }, 
    function() { $(this).find('.background-hover').hide(); } 
);

jsFiddle Demo

要知道在某些情況下，這兩個文本將顯示在同一時間 - 這是因爲你的包裝DIV也有家庭得到-開始上課所以懸停處理程序將觸發該元素太。

來源

2013-05-09 23:09:35 kapa

感謝。我認爲這件事很容易。我只是難住。 – tDiesel 2013-05-09 23:13:06

這個怎麼樣。您可以使用toggle

Demo

$(".home-get-started").hover(
    function() { $(this).find('.background-hover').toggle(); } 

);

你也有一個額外的<div class="home-get-started">是預期。如果這樣懸停，將觸發所有這些。

如果這是怎麼回事的話，最好的辦法是使用即時孩子選擇>，以避免雙方的開放。

$(".home-get-started").hover(
    function() { 
     $('> .background-hover', this).toggle(); 
    } 
);

來源

2013-05-09 23:13:19 PSL

jQuery隱藏div使用懸停顯示所有隱藏的div

回答

相關問題