2格，其中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

這是您想要的CSS

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