我想显示一个div当有人悬停在<a>元素，但我想这样做在CSS而不是JavaScript。你知道这是怎么实现的吗?
当前回答
不要忘记。如果您试图将鼠标悬停在图像上，则必须将其放置在容器周围。 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>
其他回答
这个答案不需要你知道什么类型的显示(内联等)隐藏元素应该显示时:
.hover:not(:hover) + .show-on-hover { 显示:没有; ｝ <a class="hoverable">在我上方盘旋!< / > >我是一个块元素 <人力资源/ > <a class="hoverable">也在我上方盘旋!< / > >我是一个内联元素
这使用了相邻的兄弟选择器和not选择器。
我发现使用不透明度更好，它允许你添加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 >东西
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中的文本
请测试这段代码
<!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>
如果遵循此方法，即使将鼠标悬停在隐藏元素上，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>
