Html隱藏div覆蓋

Question

好吧，所以我想知道是否有一種方法讓我做出一些東西，當我將鼠標懸停在div上時，它會顯示一個隱藏的div。我正在使用twitter引導，這是我想要做到這一點的div。

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous"> 
 

 

 

 
<div class="jumbotron text-center"> 
 
        <h2>This is the title of the first info</h2> 
 
        <h5>Hover to see info</h5> 
 
</div>

Answer 1

如果你使用的引導，你可以使用這個酥料餅：

http://getbootstrap.com/javascript/#popovers

否則，你可以使用jQuery做一個普通的隱藏/顯示：

$('.hover-element').on('hover', 
    function() { 
    $('.hidden-element').show(); 
    }, 
    function() { 
    $('.hidden-element').hide(); 
    } 
); 

Answer 2

漂亮簡單的用CSS選擇器：

<div class="jumbotron text-center"> 
    <h2>This is the title of the first info</h2> 
    <h5>Hover to see info</h5> 
    <div class="myHiddenDiv"></div> 
</div> 

.myHiddenDiv { 
    display: none 
} 

.jumbotron:hover .myHiddenDiv { 
    display:block; 
}