我想显示一个div当有人悬停在<a>元素，但我想这样做在CSS而不是JavaScript。你知道这是怎么实现的吗?
当前回答
.showme { 显示:没有; ｝ .showhim:hover .showme { 显示:块; ｝ <div class="showhim">盘旋我 < div class = " showme”>海< / div > < / div >
斯菲德尔
既然这个答案很受欢迎，我认为需要一个小小的解释。使用此方法，当你悬停在内部元素上时，它不会消失。 因为.showme在.showhim内，当你将鼠标移动到两行文本之间时(或无论它是什么)，它不会消失。
这些是在实现此类行为时需要注意的怪癖示例。
这完全取决于你需要这个做什么。这种方法更适合于菜单风格的场景，而Yi Jiang的方法更适合于工具提示。
其他回答
我绝不是一个专家，但我为自己能够解决这个代码的一些问题而感到非常自豪。如果你有:
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，那么它将不起作用。
不要忘记。如果您试图将鼠标悬停在图像上，则必须将其放置在容器周围。 css:
.brand:hover + .brand-sales {
display: block;
}
.brand-sales {
display: none;
}
如果你把鼠标悬停在这个上面:
<span className="brand">
<img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg"
alt"some image class="product-card-place-logo"/>
</span>
这将显示:
<div class="product-card-sales-container brand-sales">
<div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</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 >
请测试这段代码
<!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>
