CSS change div when hover on another div

Question

Im trying to make a div change when I hover on another div. I have done this a million times before but for some reason I just can not see why this one isnt working.

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>

wachme · Accepted Answer · 2014-07-15 01:00:25Z

1

It's simply because #float_tools div is not a direct child of #floatimg.

Try something like:

<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;
}

answered Jul 15, 2014 at 1:00

wachme

2,33720 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

qtgye · Accepted Answer · 2014-07-15 00:59:24Z

0

When you try to use the greater than sign (>), the affected element should be a direct child of the hovered element. In your HTML, the hovered element and the affected element are not directly related to each other.

It would be better this way:

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

Here is a fiddle

answered Jul 15, 2014 at 0:59

qtgye

3,6202 gold badges17 silver badges30 bronze badges

1 Comment

qtgye Over a year ago

As you see, i applied the hover to the parent of the #floatimg, which is #float_image

Collectives™ on Stack Overflow

CSS change div when hover on another div

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related