我想显示一个div当有人悬停在<a>元素，但我想这样做在CSS而不是JavaScript。你知道这是怎么实现的吗?
当前回答
如果遵循此方法，即使将鼠标悬停在隐藏元素上，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>
其他回答
如果遵循此方法，即使将鼠标悬停在隐藏元素上，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>
我发现使用不透明度更好，它允许你添加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 >东西
不要忘记。如果您试图将鼠标悬停在图像上，则必须将其放置在容器周围。 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>
.showme { 显示:没有; ｝ .showhim:hover .showme { 显示:块; ｝ <div class="showhim">盘旋我 < div class = " showme”>海< / div > < / div >
斯菲德尔
既然这个答案很受欢迎，我认为需要一个小小的解释。使用此方法，当你悬停在内部元素上时，它不会消失。 因为.showme在.showhim内，当你将鼠标移动到两行文本之间时(或无论它是什么)，它不会消失。
这些是在实现此类行为时需要注意的怪癖示例。
这完全取决于你需要这个做什么。这种方法更适合于菜单风格的场景，而Yi Jiang的方法更适合于工具提示。
基于主要答案，这是一个例子，有用的显示信息工具提示时单击?在链接附近:
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>
