这个答案不需要你知道什么类型的显示(内联等)隐藏元素应该显示时:

.hover:not(:hover) + .show-on-hover { 显示:没有; ｝ <a class="hoverable">在我上方盘旋!< / > >我是一个块元素 <人力资源/ > <a class="hoverable">也在我上方盘旋!< / > >我是一个内联元素

这使用了相邻的兄弟选择器和not选择器。

我发现使用不透明度更好，它允许你添加css3过渡，使一个漂亮的完成悬停效果。过渡将被旧的IE浏览器丢弃，因此它优雅地降级为。

#{东西 透明度:0.0; -webkit-transition:全部500ms ease-in-out; -moz-transition:全部500ms ease-in-out; -ms-transition:全部500ms ease-in-out; -o-transition:全部500ms ease-in-out; 过渡:全部500ms轻松进出; ｝ #{徘徊 宽度:80 px; 高度:20 px; 背景颜色:绿色; margin-bottom: 15 px; ｝ #悬停:悬停+ #素材{ 透明度:1.0; ｝ < div id =“悬停”>盘旋< / div > < div id = "东西" > < / div >东西

我绝不是一个专家，但我为自己能够解决这个代码的一些问题而感到非常自豪。如果你有:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

注意>，一个直接子选择器。

您可以将整个内容包含在一个a标记中，然后，只要您的触发器(可以在它自己的div中，或直接在a标记中，或任何您想要的东西中)物理地接触显示的div，您就可以将鼠标从一个div移动到另一个div。

也许这并不是很有用，但是我必须将我所显示的div设置为overflow: auto，所以有时它有滚动条，当你离开div时就不能使用。

事实上，在最终解决了如何使揭示的div，(虽然它现在是一个孩子的触发器，而不是兄弟姐妹)，坐在后面的触发器，在z-index方面，(从这个页面的一点帮助:如何让一个父元素出现在孩子上面)，你甚至不需要滚动显示的div滚动它，只是停留在触发器和使用你的轮子，或其他。

我所显示的div覆盖了大部分页面，因此这种技术使它更加持久，而不是随着鼠标的每一次移动屏幕从一个状态闪烁到另一个状态。这真的很直观，所以我真的很为自己感到骄傲。

唯一的缺点是你不能把链接放在整个东西里面，但是你可以把整个东西作为一个大链接使用。

.showme { 显示:没有; ｝ .showhim:hover .showme { 显示:块; ｝ <div class="showhim">盘旋我 < div class = " showme”>海< / div > < / div >

斯菲德尔

既然这个答案很受欢迎，我认为需要一个小小的解释。使用此方法，当你悬停在内部元素上时，它不会消失。 因为.showme在.showhim内，当你将鼠标移动到两行文本之间时(或无论它是什么)，它不会消失。

这些是在实现此类行为时需要注意的怪癖示例。

这完全取决于你需要这个做什么。这种方法更适合于菜单风格的场景，而Yi Jiang的方法更适合于工具提示。

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

code depen:悬停在div上显示另一个div中的文本

这个答案不需要你知道什么类型的显示(内联等)隐藏元素应该显示时:

.hover:not(:hover) + .show-on-hover { 显示:没有; ｝ <a class="hoverable">在我上方盘旋!< / > >我是一个块元素 <人力资源/ > <a class="hoverable">也在我上方盘旋!< / > >我是一个内联元素

这使用了相邻的兄弟选择器和not选择器。