Question

好吧所以我想知道我是否有办法制作一些东西，当我将鼠标悬停在div上时，它会显示一个隐藏的div。我正在使用twitter bootstrap，这是我想用这个做的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

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

Answer 2

如果你正在使用bootstrap，你可以使用一个popover：

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

否则你可以使用jQuery进行通用的hide / show：

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

Html隐藏的div叠加

2 个答案: