mouseover only on one element (same class)

Question

I'm having problem making a color change & image change on mouseover(using Jquery, or using CSS if possible it doesnt metter), but I've a problem that only the first element get change, or all of them (using the ID/CLASS for every element for deisgn), now this is my html, and CSS for my design

CSS:

#button_id {
    margin: 5px;
    display: block;
}

#button_nav {
    display: inline;
}

#button_img {
    background-image: url('images/left_nav_button.gif');
    width: 11px;
    height: 11px;
    float: left;
}

HTML:

<div id="button_id" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Employment & skills</div>
        <div id="clear"></div>
    </div>
</div>

I tried using jQuery like this:

$(".button_id").mouseover(function() {
    $("#button_img").css('background-image', 'url(images/left_nav_button_hover.gif)');
    $(".button_id").css('color','#0365b9');
}).mouseout(function() {
    $(".button_img").css('background-image', 'url(images/left_nav_button.gif)');
    $(".button_id").css('color','#8C8C8C');
});

I tried to play with it and I got into 2 situations:

1. When everyone get a color changed + the background-image
2. Only the first div ( id="button_id" class="button_id" ) got change.

I tried, to switch and play with the class/id but couldn't solve it, I also tried using $("#this") it worked only with the color (because the image is other div, I also tried to use .children but I wasn't sure how to set it on other div, I tried something like

$(this).children(("#element")).css(..)

but it didn't work :(

Answer 1

(First: since ID's must be unique, I assume that the html you posted in the question is also unique to your page)

Trying to figure out what you're actually looking for the code to do - not making too much sense of it to be honest. To change a single element:

<div id="button_id">
      <div id="button_nav"> 
            <div id="button_img"></div>
            <div id="button_name">Employment & skills</div>
            <div id="clear"></div>
      </div>
</div>

$("#button_id").mouseover(function() {
    $("#button_img").css('background-image', 'url(images/left_nav_button_hover.gif)');
    $("#button_id").css('color','#0365b9');
}).mouseout(function() {
    $("#button_img").css('background-image', 'url(images/left_nav_button.gif)');
    $("#button_id").css('color','#8C8C8C');
});

To change several elements you usually use classes, but then the css will look different:

.button_Class {
    /*foo*/
}

<div class="button_Class">

$(".button_Class").css('foo','bar');

etc.

Answer 2

try using mouseenter() and mouseleave()

live demo here

HTML

<div id="button_1" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Employment & skills</div>
        <div id="clear"></div>
    </div>
</div><br/>
<div id="button_2" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Contact Us</div>
        <div id="clear"></div>
    </div>
</div><br/>
<div id="button_3" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Corporate Queries</div>
        <div id="clear"></div>
    </div>
</div>

CSS

.button_id {
    margin: 5px;
    display: block;
    border:1px dotted red;
}


#button_nav {

    display: inline;
}

#button_img {
    background-image: url('images/left_nav_button.gif');
    width: 11px;
    height: 11px;
    float: left;
}

jQuery

    $(".button_id").mouseenter(function() {
    $("#button_img", this).css('background-image', 'url(images/left_nav_button_hover.gif)');
    $(this).css('color', '#0365b9');
}).mouseleave(function() {
    $(".button_img", this).css('background-image', 'url(images/left_nav_button.gif)');
    $(this).css('color', '#8C8C8C');
   });

Answer 3

If I'm understanding your question correctly, there are multiple <div id="button_id" class="button_id"> containers..?

If so, that may be the problem - each id must be unique. Try removing the ids and stick to classes (example at JSFiddle).

Answer 4

In the case you have given us, you don't need to use any javascript to do simple hover changes, since you area only doing CSS changes in them anyway:

CSS

.button_id {
    background: #000000 url(/path/to/image) top left no-repeat;
}
.button_id:hover {
    background: #ff0000 url(/path/to/image2) top left no-repeat;
}

HTML

<div id="button_id" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Employment & skills</div>
        <div id="clear"></div>
    </div>
</div>

If you want to do non-css things, then you can use the function hover():

jQuery( function($) {
    $('.button_id').hover(
        function() {
            // Do mouseover stuff here
        },
        function() {
            // Do mouseout stuff here
        }
});

Answer 5

I would ditch all of these efforts and use css sprites to do what you are trying to do, dont make things harder on yourself. Make the image exactly double the height place your hover image at the bottom. Then add that image as a background to your a href, then when the user hovers over your a href or div or whatever this works for everything. Add after that div :hover in your css. Change the background-position to be bottom not top. Done.. If you need a demo I can drop one for you, but this is a sprite in a nutshell.

Answer 6

Try this:

$(document).ready(function() {
    $(".button_id").hover(function() {
    $("#button_img", this).css('background-image', 'url(images/left_nav_button_hover.gif)');
    $(this).css('color', '#0365b9');
}, function() {
    $(".button_img", this).css('background-image', 'url(images/left_nav_button.gif)');
    $(this).css('color', '#8C8C8C');
   });
});