將鼠標懸停在另一個div上時CSS更改div

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不是#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;
}

Answer 2

當您嘗試使用大於號（ > ）時，受影響的元素應該是懸停元素的直接子元素。 在HTML中，懸停元素和受影響的元素並不直接相關。

這樣會更好：

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

這是一個小提琴