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放入第一个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

Here is the CSS你想要什么

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