javascript - 2 个 div，1 个隐藏，悬停时触发另一个

Question

我想要一个 div，它本身有 2 个 div，并且底部 div 被隐藏，直到你将鼠标悬停在它上面。

<div class="div_wrapper">

   <div class="div_one">Image</div>

   <div class="div_two">description</div>

</div>

描述是隐藏的，直到您将鼠标悬停在图像上然后它显示在其下方，当您将鼠标悬停在图像或描述上时，它们的描述将返回隐藏。

Answer 1

您可以使用 CSS 完成此操作：

.div_two { display: none; }
.div_one:hover + .div_two { display: block; }

Answer 2

如果您使用 jQuery，则可以使用以下代码：

var div_two = $('.div_two');
$('.div_one').mouseenter(function() {
    div_two.show();
}).mouseleave(function() {
    div_two.hide();
});

它应该有CSS

.div_two { display: none; }

或者如果您将第二个 div 放入第一个，您可以使用 css 显示隐藏它们

<div class="div_wrapper">
   <div class="div_one">Image
       <div class="div_two">description</div>
   </div>
</div>

和CSS：

.div_two { display: none; }
.div_one:hover .div_two { display: block; }

Answer 3

您可以使用visibility:hidden和visible

这是你想要的 CSS

.div_two {
  visibility: hidden;
}
.div_one:hover + .div_two {
  visibility: visible;
}