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

的可能重复的[显示独立地使用各方法单个元件]（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也有家庭得到-开始上课所以悬停处理程序将触发该元素太。

感谢。我认为这件事很容易。我只是难住。 – 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(); 
    } 
);

jQuery隐藏div使用悬停显示所有隐藏的div

相关推荐