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

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

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

我发现使用不透明度更好，它允许你添加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 >东西

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

斯菲德尔

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

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

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

从我的测试使用这个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，那么它将不起作用。

基于主要答案，这是一个例子，有用的显示信息工具提示时单击?在链接附近:

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; }; document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); } document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block'; e.stopPropagation(); }; #help { opacity: 0; margin-left: 0.1em; padding: 0.4em; } a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; } #tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; } <a href="">Delete all obsolete informations</a><span id="help">?</span> <div id="tooltip">All data older than 2 weeks will be deleted.</div>

+只允许'选择'第一个未嵌套的元素，>只允许选择嵌套的元素-最好使用~，它允许选择任意元素，即父悬浮元素的子元素。使用不透明度/宽度和过渡，你可以提供平滑的外观

Div{过渡:全部1} .ccc， .ggg{透明度:0;颜色:红} .ccc{高度:0} .aaa:hover ~ .bbb .ccc{透明度:1;高度:34px} .aaa:hover ~ .eee .fff .ggg{透明度:1} <div class="aaa">盘旋我…查看<br><br> </div> < div class = ' bbb > BBBBB < div class =“ccc”> CCCCC < div class = ' ddd ' > DDDDD < / div > < / div > < / div > < div class = ' eee ' > EEEEE < div class =”fff“> FFFFF < div class = ' ggg ' > GGGGG < / div > < div class = '终极战士' > HHHHH < / div > < / div > < / div >