The OP is asking about a very simple link rollover. Since it appears
people aren't taking RobG's advice and looking up "CSS rollovers" on
Google, here is a quick demonstration:
http://test.learningjquery.com/css-background-image.html
On May 22, 2009, at 2:41 PM, Andy Matthews wrote:
I believe your CSS is invalid. I don't think you can apply both a
class AND
an ID in the same selector which is what #base-state.active does.
The CSS is perfectly valid, as you can see if you copy and paste it in
here: http://jigsaw.w3.org/css-validator/#validate_by_input
Now
#base-state:active might work as that's a pseudo class.
The :hover pseudo-class will work just fine. If you want the state to
change when the user tabs onto the link, then use :focus as well.
As others have already noted, this requires absolutely no jQuery/
JavaScript whatsoever.
For IE6, however, if you're getting a flash in between states, you'll
want to add the following somewhere in the <head> (or reference a
script file that does the same):
<!--[if lte IE 6]>
<script type="text/javascript">
try {
document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
</script>
<![endif]-->
-----Original Message-----
Behalf Of ButtersRugby
Then in your css,
#base-state {background-position: 0px 0px;} // The first 0 is the X
axis position, the second is the Y
#base-state.active {background-position: 0px 30px;} // This is our
second
class that we will switch to with our jquery
You probably meant to use a negative number for the y axis on #base-
state.active
#base-state.active {background-position: 0px -30px;}
$(document).ready(function() {
$("#base-state").click(function() {
$(this).toggleClass("active");
}
)
});
The OP wanted the state to change on hover, not click. Anyway, jQuery
is not necessary.
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
