it recognizes an a:hover though, so display:block and use that as the trigger.
it's more semantically meaningful than making a div a link anyway. On May 23, 7:04 pm, waseem sabjee <waseemsab...@gmail.com> wrote: > 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
