Question

我确信有人问过，但我无法找到解决问题的方法。我有一个在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"}); }
);

Answer 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类，因此悬停处理程序也将触发该元素。

Answer 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();
   }
);

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

2 个答案: