Re: [jQuery] Comparing or checking for a specific "sub" class?

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.poulsen@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>