yes. however sometimes the jquery method is needed for IE6 as IE6 won't recognize a div:hover or li:hover
but in this situation css only works best. On Sat, May 23, 2009 at 6:42 PM, Karl Swedberg <k...@englishrules.com>wrote: > 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 > > > >
