CODEWITHSUNDEEP
jquerycss
John
John

Reputation: 147

background position issue

I have an ul with a bunch of li which all have a different background image. When you hover each li, you get the rollover background position change expected. I have also applied a button that fires off a jquery function to apply that background position change to every li at the same time. That also works as expected.

What does not work is, once you hover the button that calls the jquery, you cannot successfully hover the lis individually anymore.

here is the working(or not) example... http://www.weirdesigns.com/simple/ Roll the circles first, the try the button, then try the cirles again, they dont work anymore??? Please help...

Here's my jQuery:

$(document).ready(function(){
    $('.powerRoll').hover(function(){
        $('li').css({backgroundPosition: '0 -130px'});
    })
    .mouseout(function(){
        $('li').css({backgroundPosition: '0px 0px'});
    })
});

Upvotes: 0

Views: 386

Answers (3)

Purag
Purag

Reputation: 17061

Since your Javascript sets the inline style attribute of your li elements, the style sheet's declarations are being overruled. You can fix this by adding !important to the end of the :hover background-position declaration:

li:hover {
    background-position : 0 -130px !important;
}

Also, I noticed that your jQuery is a bit odd.

You have a hover() function and then a mouseout(). You can combine the two and use less space:

$(document).ready(function(){
    $('.powerRoll').hover(function(){
        $('li').css("background-position","0 -130px");
    }, function(){
        $('li').css("background-position","0px 0px");
    });
});

Better yet, you could just "clear" the property with Javascript so it inherits from the style sheet on hover:

$(document).ready(function(){
    $('.powerRoll').hover(function(){
        $('li').css("background-position","0 -130px");
    }, function(){
        $('li').css("background-position","");
    });
});

And, finally, you'll notice I changed up the syntax of your css() function. This is because you don't need the brackets since you're only changing one property's value.

Upvotes: 2

Jasper
Jasper

Reputation: 76003

The problem is that your JavaScript is setting inline CSS which is used over CSS declared in a style sheet.

You can add !important to the class declaration for the background position for each list-item element.

li:hover {
    background-position : 0 -130px !important;
}

Alternatively you could change your JS so you don't override the CSS rule on mouseout:

$('.powerRoll').mouseover(function(){
    $('li').css({backgroundPosition: '0 -130px'});
})
.mouseout(function(){
    $('li').css({backgroundPosition: ''});
})

I tested both of these methods on your site and they both appeared to function as you want.

Another alternative is to create a class to add and remove from the element rather than changing it's inline CSS:

CSS --

li:hover, li.hover {
     background-position : 0 -130px;
}

JS --

$('.powerRoll').mouseover(function(){
    $('li').addClass('hover');
})
.mouseout(function(){
    $('li').removeClass('hover');
})

Upvotes: 2

animuson
animuson

Reputation: 54729

You are changing the background position back to 0px 0px on mouse-out of the very bottom button, which applies an inline style to that element, which will override your CSS classes defined elsewhere. What you want to do is remove the background position property on mouse-out, so it will start paying attention to your classes again.

.mouseout(function(){
    $('li').css({backgroundPosition: ''});
})

See the jsFiddle.

Upvotes: 0

Related Questions