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

【问题标题】：jQuery hidden div using hover showing all hidden divsjQuery隐藏的div使用悬停显示所有隐藏的div
【发布时间】：2013-05-10 15:22:40
【问题描述】：

我确定有人问过它，但我找不到我的问题的解决方案。我有一个跨 3 个 div 命名相同的类。此类正在使用 css 隐藏。问题是当我将鼠标悬停在 1 个 div 上时，所有 3 个同时显示隐藏。我只想显示我悬停的元素。我想我应该使用 .each() 但我不确定它是如何组合在一起的。

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

【问题讨论】：

show individual elements independently using each method的可能副本

标签： jquery dom-traversal

【解决方案1】：

您正在显示/隐藏类 background-hover 的所有元素。您可能想要的只是对触发事件的元素的后代执行此操作...

您可以使用find() 在DOM 中查询某个元素的后代（在我们的例子中为this）。

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

jsFiddle Demo

请注意，在某些情况下，两个文本会同时显示 - 这是因为您的包装 div 也有 home-get-started 类，因此悬停处理程序也会为该元素触发。

【讨论】：

谢谢。我以为事情就这么简单。我只是被难住了。

【解决方案2】：

这个怎么样。你可以使用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();
   }
);

【讨论】：