On Mar 29, 2009, at 9:09 AM, donb wrote:
'background-position' is really a shorthand expression for background-
position-x and background-position-y
I would try switching to the -x proprety to see what happens.
See this test:
On Mar 29, 1:27 am, kostik <i...@kostik.de> wrote:i just don't get it. This is what I have:a {background: url(../images/test.jpg) no-repeat scroll 0 0;}a:hover {background: url(../images/test.jpg) no-repeat scroll -228px 0;}Now, when I call$('a').css('background-position', '-500px 0');the CSS forgets about a:hover.1. Why?2. How can I set a:hover in jQuery? $('a:hover').css('background-position', '-228px 0') doesn't work... (and I don't want to use jQueryhover() events
It doesn't forget about a:hover. It's just that the .css() method adds the property as an inline style, which trumps the "a:hover" selector in your stylesheet.
Unless you're calculating the background position with JavaScript, you're probably better off adding and removing classes.
[css:]
a {
background: url(../images/test.jpg) no-repeat scroll 0 0;
background: url(../images/test.jpg) no-repeat scroll 0 0;
}
a:hover {
background: url(../images/test.jpg) no-repeat scroll -228px 0;
}
a:hover {
background: url(../images/test.jpg) no-repeat scroll -228px 0;
}
a.some-class {
background-position: -500px 0;
}
[js:]
$('a').addClass('some-class')
.hover(function() {
$(this).removeClass('some-class');
}, function() {
$(this).addClass('some-class');
});
If you're including the javascript file in the <head>, you'll need to wrap the jQuery bit in a $(document).ready()
No comments:
Post a Comment