Making a whole div change over hover

Question

I have the image hover working properly, but it only changes color once it's hovered over. Like, I want the div once hovered, it'll change the image.

I don't want to hover over the image itself and it only changes, which is what it's doing.

HTML:

<div class="navigation-box">                                    
        <div class="sidehead"><i class="lock"></i>header 1</div>                                
            <div class="navLinks">
                <ul class="">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>          
</div>

CSS:

.lock {
    background: url('../images/lock.png') no-repeat center;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    margin-top:-5px;
    margin-left:5%;
}

li:hover .lock{
    background: url("../images/lock-hover.png") no-repeat center;    
}

Fiddle

In the fiddle, you'll see what I'm talking about. I simply want the div sidehead once hovered over, to change the lock image. Any ideas what it is that I'm doing wrong?

The replacement image is white on white...so you can't see it - http://jsfiddle.net/acvLkepv/ — Paulie_D, Oct 31 '14 at 21:49
Let me clarify. Do you want it to permanently change after the hover? Such that if you mouse out of the element it still is the white image? — Spencer Wieczorek, Oct 31 '14 at 21:51
I know. That's not what I was talking about though, haha! I'm trying to have it to where I hover over "header 1" and the image will change. It doesn't do that. I have to go to the image itself to see the image change. I want to be able to hover anywhere over the div and it'll change that image. — kris, Oct 31 '14 at 21:52
@SpencerWieczorek the whole hover works correct. I'm not worried about that. It when I hover over the div it self, the image doesn't change. I have to hover over the actual image to get it to change to white. — kris, Oct 31 '14 at 21:53
So when you hover over the div with the class `navigation-box` you want the image to change? But still act like a normal hover where it goes back to normal when you leave the div? — Spencer Wieczorek, Oct 31 '14 at 21:54

score 1 · Accepted Answer · answered Oct 31 '14 at 21:58

You have the selector slightly wrong.

If you want something to happen when you hover over the .sidehead div, that where you have to put the hover

.sidehead .lock {
    background: url('http://uploadir.com/u/il2433z4') no-repeat center;
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    margin-top:-5px;
    margin-left:5%;
}
.sidehead:hover .lock {
    background: grey url("http://uploadir.com/u/4js58y48") no-repeat center;
}
.sidehead {
    border:1px solid green; /* for visual refernece */
}

<div class="navigation-box">
    <div class="sidehead"><i class="lock"></i>header 1</div>
    <div class="navLinks">
        <ul class="">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:20

This doesn't work because CSS can't select a parent. Your CSS reads as when you hover over the list item, the child .lock will do something. This is where jQuery comes in. You can write something like this:

$('li').hover(function(){
  $('.lock').addClass('newClass');
});

CSS:

.newClass {
  background: url("../images/lock-hover.png") no-repeat center;  
}

This is just an example and doesn't include when you hover outside of the list but it should help move things along.

score 0 · Answer 3 · answered Oct 31 '14 at 22:02

You can use JavaScript. So you can use the mouseout and mouseover events to work as a hover:

$(".navigation-box").mouseover(function(){ // White image
    $(".lock").css("background"," url('http://uploadir.com/u/4js58y48') no-repeat center")
});
$(".navigation-box").mouseout(function(){ // Black image
    $(".lock").css("background"," url('http://uploadir.com/u/il2433z4') no-repeat center")
});

Here is an example. Note I changed the background color of the body so the change is obvious.

Or you can do:

.navigation-box:hover > .sidehead > .lock {
    background: url("http://uploadir.com/u/4js58y48") no-repeat center;  
}

For example

score 0 · Answer 4 · answered Oct 31 '14 at 22:03

You can easily do this using jQuery

I would advice to give your li a class (or your ul)

$('li').on('mouseenter mouseleave', function(e) {
    $('.lock').trigger(e.type);
});

This code will trigger the hover event for every .lock object when an li is hovered (add id's and or classes if you want to make it a bit more precise but that should be pretty straight forward)

Making a whole div change over hover

4 Answers4