CODEWITHSUNDEEP
htmlcss
kris
kris

Reputation: 117

Making a whole div change over hover

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?

Upvotes: 0

Views: 191

Answers (4)

J. van Dijk
J. van Dijk

Reputation: 415

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)

Upvotes: 0

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21565

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

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

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>

Upvotes: 1

austinthedeveloper
austinthedeveloper

Reputation: 2601

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.

Upvotes: 0

Related Questions