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.
It depends on the browser. Firefox 3.0.x doesn't recognize background-
position-x or background-position-y.
See this test:
http://test.learningjquery.com/background-position.html
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
jQuery
hover() 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;
}
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()
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
