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中的文本

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

斯菲德尔

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

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

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

你可以这样做: div { 显示:没有; ｝ A:hover + div { 显示:块; ｝ <a>盘旋在我上方!< / > <div>悬停显示的东西</div>

这使用相邻的兄弟选择器，并且是suckerfish下拉菜单的基础。

HTML5允许锚元素包装几乎任何东西，所以在这种情况下div元素可以成为锚的子元素。否则，原理是相同的-使用:hover伪类来改变另一个元素的显示属性。

从我的测试使用这个CSS:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

这个HTML:

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

，结果是它使用第二个扩展，但不使用第一个扩展。因此，如果在悬停目标和隐藏div之间有一个div，那么它将不起作用。

我想提供这个通用模板解决方案，它扩展了Yi Jiang提供的正确解决方案。

额外的好处包括:

支持将鼠标悬停在任何元素类型或多个元素上; 弹出窗口可以是任何元素类型或元素集，包括对象; 自我记录的代码; 确保弹出框出现在其他元素之上; 如果您正在从数据库生成HTML代码，则可以遵循此基础。

在html中放置以下结构:

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

在css中放置以下结构:

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

需要注意的几点是:

Because the position of the div.popup is set to fixed (would also work with absolute) the content is not inside the normal flow of the document which allows the visible attribute to work well. z-index is set to ensure that the div.popup appears above the other page elements. The information_popup_container is set to a small size and thus cannot be hovered over. This code only supports hovering over the div.information element. To support hovering over both the div.information and div.popup then see Hover Over The Popup below. It has been tested and works as expected in Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 and Google Chrome 28.0.15.

悬停在弹出窗口上

作为附加信息。当弹出窗口包含你可能想要剪切和粘贴的信息或包含你可能想要与之交互的对象时，首先替换:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

with

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

其次，调整div.popup的位置，使其与div.information重叠。少量像素足以确保div.popup在将cusor移出div.information时能够接收悬停。

这在Internet Explorer 10.0.9200中无法正常工作，但在Opera 12.16、Firefox 18.0和谷歌Chrome 28.0.15中正常工作。

查看小提琴http://jsfiddle.net/F68Le/一个完整的例子与弹出多层次菜单。

对我来说，如果我想与隐藏的div交互，而不看到它消失每次我离开触发元素(在这种情况下)，我必须添加:

div:hover {
    display: block;
}