[英]CSS change div when hover on another div
我试图将div悬停在另一个div上时进行更改。 我已经做了一百万遍了,但是由于某种原因,我只是看不到为什么这个没有用。
CSS
#floatimg:hover > #float_tools
{
opacity: 1;
}
#float_tools
{
width: 150px;
margin: auto;
opacity: 0.3;
}
HTML
<div id='floatBox'>
<div id='float_image'>
<img id="floatimg" src="">
</div>
<div id='float_tools'>
<div id='float_prev'><a href='javascript:void' onclick=''><img src='images/Button_Prev.png' width='50px'></a></div>
<div id='float_close'><a href='javascript:void' onclick=''><img src='images/close.png' width='50px'></a></div>
<div id='float_next'><a href='javascript:void' onclick=''><img src='images/Button_Next.png' width='50px'></a></div>
</div>
</div>
仅仅是因为#float_tools
div不是#float_tools
的直接#floatimg
。
尝试类似:
<div id='floatBox'>
<div id='float_image'>
<img id="floatimg" src="">
<div id='float_tools'>
<div id='float_prev'><a href='javascript:void' onclick=''><img src='images/Button_Prev.png' width='50px'></a></div>
<div id='float_close'><a href='javascript:void' onclick=''><img src='images/close.png' width='50px'></a></div>
<div id='float_next'><a href='javascript:void' onclick=''><img src='images/Button_Next.png' width='50px'></a></div>
</div>
</div>
</div>
CSS:
#float_image:hover > #float_tools
{
opacity: 1;
}
#float_tools
{
width: 150px;
margin: auto;
opacity: 0.3;
}
当您尝试使用大于号( >
)时,受影响的元素应该是悬停元素的直接子元素。 在HTML中,悬停元素和受影响的元素并不直接相关。
这样会更好:
#float_image:hover + #float_tools
{
opacity: 1;
}
#float_tools
{
width: 150px;
margin: auto;
opacity: 0.3;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.