Question

当我将鼠标悬停在另一个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>

Answer 1

这只是因为#float_tools div不是#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;
}

Answer 2

当您尝试使用大于号（>）时，受影响的元素应该是悬停元素的直接子元素。在您的HTML中，悬停元素和受影响的元素彼此不直接相关。

这样会更好：

#float_image:hover + #float_tools
{
opacity: 1;
}
#float_tools
{
width: 150px;
margin: auto;
opacity: 0.3;
}

Here is a fiddle

当鼠标悬停在另一个div上时CSS改变div

2 个答案: