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; 
}