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

我肯定有人问过，但我找不到解决问题的办法。我有一个在3个div中命名相同的类。正在使用css隐藏此类。问题是，当我将鼠标悬停在其中一个div上时，所有3个div同时显示隐藏。我只想让悬停在上面的元素显示出来。我想我应该使用.each（），但我不确定它是如何组合在一起的

CSS

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>

---

使用类

背景悬停显示/隐藏所有元素。您可能希望只对触发事件的元素的后代执行此操作

您可以使用来查询DOM中某个元素的后代（
this
）


请注意，在某些情况下，两个文本将同时显示-这是因为您的包装器div还具有home get started类，因此悬停处理程序也将为该元素启动。
您正在使用class
后台悬停来显示/隐藏所有元素。您可能希望只对触发事件的元素的后代执行此操作

您可以使用来查询DOM中某个元素的后代（
this
）


请注意，在某些情况下，这两个文本将同时显示-这是因为您的包装器div还具有home get started类，因此悬停处理程序也将为该元素触发。
这样如何。你可以用


此外，您还有一个额外的
。如果是这样，在上面悬停会触发所有这些

如果是这样的话，那么最好使用直接子选择器
，以避免同时打开这两个选择器

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

这个怎么样。你可以用


此外，您还有一个额外的
。如果是这样，在上面悬停会触发所有这些

如果是这样的话，那么最好使用直接子选择器
，以避免同时打开这两个选择器

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

谢谢我以为这很简单。我只是被难住了。谢谢。我以为这很简单。我被难住了。一个可能的复制品一个可能的复制品
$(".home-get-started").hover(
    function () { $(this).find('.background-hover').show(); },
    function () { $(this).find('.background-hover').hide(); }
);

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

);

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