当有人将鼠标悬停在<a>元素上时，我想显示一个div ，但是我想在CSS中而不是在JavaScript中执行此操作。您知道如何实现吗？
仅使用CSS，将div悬停在<a>上时显示div
的HTML
<div>
<h4>Show content</h4>
</div>
<div>
<p>Hello World</p>
</div>
的CSS
div+div {
display: none;
}
div:hover +div {
display: block;
}
根据我使用此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交互，而每次离开触发元素时都看不到它消失（在这种情况下为a），则必须添加：
div:hover {
display: block;
}
请测试此代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:blue;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:white;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
a:hover + div{
display:inline;
}
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>
我想提供这种通用模板解决方案，该解决方案扩展了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;
}
需要注意的几点是：
- 因为div.popup的位置设置为固定的（也可以使用绝对值），所以内容不在文档的正常流程中，因此可见属性无法正常工作。
- 设置z-index以确保div.popup出现在其他页面元素上方。
- 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.
Hover Over The Popup
As additional information. When the popup contains information that you might want to cut and paste or contains an object that you might want to interact with then first replace:
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;
}
And second, adjust the position of div.popup so that there is an overlap with div.information. A few pixels is sufficient to ensure that the div.popup is can receive the hover when moving the cusor off div.information.
这在Internet Explorer 10.0.9200中无法正常工作，在Opera 12.16，Firefox 18.0和Google Chrome 28.0.15中工作正常。
有关带有弹出式多级菜单的完整示例，请参见小提琴http://jsfiddle.net/F68Le/。
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>由于这个答案很受欢迎，我认为需要做一个小小的解释。当您将鼠标悬停在内部元素上时，使用此方法将不会消失。因为.showme位于.showhim内部，所以当您在两行文本（或任何两行文本）之间移动鼠标时，它不会消失。
这些是在实现此类行为时需要注意的quirq的示例。
这完全取决于您需要什么。此方法适用于菜单样式的方案，而Yi Jiang的适用于工具提示。
我发现使用opacity更好，它允许您添加css3过渡以达到很好的悬停效果。转换将仅由较旧的IE浏览器删除，因此可以正常降级。
#stuff {
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#hover {
width:80px;
height:20px;
background-color:green;
margin-bottom:15px;
}
#hover:hover + #stuff {
opacity: 1.0;
}<div id="hover">Hover</div>
<div id="stuff">stuff</div>
别忘了 如果您要在图像上悬停，则必须将其放在容器周围。CSS：
如果您将鼠标悬停在此：
这将显示：