我想显示一个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>
其他回答
请测试这段代码
<!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{过渡:全部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 >
你可以这样做: div { 显示:没有; ｝ A:hover + div { 显示:块; ｝ <a>盘旋在我上方!< / > <div>悬停显示的东西</div>
这使用相邻的兄弟选择器，并且是suckerfish下拉菜单的基础。
HTML5允许锚元素包装几乎任何东西，所以在这种情况下div元素可以成为锚的子元素。否则，原理是相同的-使用:hover伪类来改变另一个元素的显示属性。
这个答案不需要你知道什么类型的显示(内联等)隐藏元素应该显示时:
.hover:not(:hover) + .show-on-hover { 显示:没有; ｝ <a class="hoverable">在我上方盘旋!< / > >我是一个块元素 <人力资源/ > <a class="hoverable">也在我上方盘旋!< / > >我是一个内联元素
这使用了相邻的兄弟选择器和not选择器。
从我的测试使用这个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，那么它将不起作用。
