javascript - 2 つの div、1 つが非表示で、ホバーするともう一方がトリガーされます

Question

内部に 2 つの div を持つ 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 に 2 番目の 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; }