我想显示一个div当有人悬停在<a>元素，但我想这样做在CSS而不是JavaScript。你知道这是怎么实现的吗?
当前回答
对我来说，如果我想与隐藏的div交互，而不看到它消失每次我离开触发元素(在这种情况下)，我必须添加:
div:hover {
display: block;
}
其他回答
.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伪类来改变另一个元素的显示属性。
请测试这段代码
<!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>
我绝不是一个专家，但我为自己能够解决这个代码的一些问题而感到非常自豪。如果你有:
div {
display: none;
}
a:hover > div {
display: block;
}
注意>，一个直接子选择器。
您可以将整个内容包含在一个a标记中，然后，只要您的触发器(可以在它自己的div中，或直接在a标记中，或任何您想要的东西中)物理地接触显示的div，您就可以将鼠标从一个div移动到另一个div。
也许这并不是很有用，但是我必须将我所显示的div设置为overflow: auto，所以有时它有滚动条，当你离开div时就不能使用。
事实上，在最终解决了如何使揭示的div，(虽然它现在是一个孩子的触发器，而不是兄弟姐妹)，坐在后面的触发器，在z-index方面，(从这个页面的一点帮助:如何让一个父元素出现在孩子上面)，你甚至不需要滚动显示的div滚动它，只是停留在触发器和使用你的轮子，或其他。
我所显示的div覆盖了大部分页面，因此这种技术使它更加持久，而不是随着鼠标的每一次移动屏幕从一个状态闪烁到另一个状态。这真的很直观，所以我真的很为自己感到骄傲。
唯一的缺点是你不能把链接放在整个东西里面，但是你可以把整个东西作为一个大链接使用。
从我的测试使用这个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，那么它将不起作用。
