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

如果你使用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 2

你可以做到這一點使用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; 
}