我想显示一个div当有人悬停在<a>元素，但我想这样做在CSS而不是JavaScript。你知道这是怎么实现的吗?
当前回答
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中的文本
其他回答
我发现使用不透明度更好，它允许你添加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 >东西
如果遵循此方法，即使将鼠标悬停在隐藏元素上，element也会出现。如果您想单击隐藏元素，这将很有用。例如，您可能希望看到一个删除选项，然后单击它。
<style>
#delete_link {
display: none;
}
a:hover + #delete_link {
display: block;
}
#delete_link:hover{
display: block;
}
</style>
</head>
<body>
<a>Hover over me!</a>
<div id="delete_link"><a href="#">Element show on hover</a></div>
</body>
我想提供这个通用模板解决方案，它扩展了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/一个完整的例子与弹出多层次菜单。
从我的测试使用这个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，那么它将不起作用。
对我来说，如果我想与隐藏的div交互，而不看到它消失每次我离开触发元素(在这种情况下)，我必须添加:
div:hover {
display: block;
}
