Thank you very much. My issue with the invalid html is that I actually want to fade the background image of the "a"-element, and then keep the text visible. The "a"-elements are big squares with text inside them, and i use "span" to position the text in a "left-center"-way. I could only figure out how to animate the background in a "xy"-kind of way, so my quick and dirty solution was to insert a div and then make this become the real squares and then fade them. But I guess I could just turn them in to spans then in order to achieve correct html?
On Nov 27, 6:02 am, Michael Geary <m...@mg.to> wrote: > I think the method you're looking for is .not(): > > http://docs.jquery.com/Traversing/not > > Also, there is a shortcut for your mouseenter/mouseleave pattern called > .hover(): > > http://docs.jquery.com/Events/hover > > If you look at the source code for .hover(), you can see that it is > literally a wrapper for the two mouse events: > > hover: function(fnOver, fnOut) { > return this.mouseenter(fnOver).mouseleave(fnOut); > }, > > One other concern: It is invalid HTML to have a DIV element inside an A > element. DIV is a block-level element and A is an inline element. You cannot > have a block-level element inside an inline element. It will probably work > in most browsers, but it's possible that some browser may decide to > rearrange your elements to create a valid result. > > Setting that aside, your code might end up looking like: > > <script type="text/javascript"> > $(document).ready(function() { > $('.page_item').not('.current_page_item').hover( > function() { $(this).children('a').children('div').fadeIn(0); }, > function() { $(this).children('a').children('div').fadeOut(200);} > > ); > }); > </script> > > You could also (again ignoring the invalid HTML problem) simplify the > .children bit like this: > > $(this).find('>a>div').fadeIn (or fadeOut) > > There's no advantage to that other than brevity, so if you prefer the > .children().children() approach that's fine too. > > -Mike > > > > On Thu, Nov 26, 2009 at 2:39 PM, Janmansilver <jan.poul...@gmail.com> wrote: > > I have a menu looking like this: > > > <li class="page_item current_page_item">...</li> > > <li class="page_item">...</li> > > <li class="page_item">...</li> > > > and so on... > > > I then have a mouseenter function that highlights/"de"-highlights the > > various menu items, but I would like to not having it affect the item > > with the extra class "current_page_item". How do I solve this? > > > my current code: > > > <script type="text/javascript"> > > $(document).ready(function() { > > $('.page_item').mouseenter(function(e) { > > > $(this).children('a').children('div').fadeIn(0); > > > }).mouseleave(function(e) { > > > $(this).children('a').children('div').fadeOut(200); > > > }); > > }); > > </script>
