如何在jQuery中选择：#menu ul li：hover> ul？

Question

How to select in jQuery an equivalent of #menu ul li:hover > ul ?

I would like to change the color of a box when hover is only on li TARGET

For more details, see: http://jsfiddle.net/wGbwX/18/

Answer 1

You could hover the parent of nested uls:

$('#menu ul > li >ul').parent().hover

EDITED to reflect pebbl's recomendation of using selecting nested li's

Updated JS fiddle: http://jsfiddle.net/wGbwX/23/

Answer 2

Since your TARGET is in an a tag you can use the following:

$('#menu > ul > li > a')

The > is to select the immediate child of each parent. Then finally bind the hover event on the a tag instead of the li .

The reason for using all those > in the selectors, is so that the selector doesn't select the a tag that are inside the TARGET li .

Edit:

Since the HOME link should not trigger the hover event, you can use one of the following:
^{Both will select the same items, but the logic is different.}

$('#menu>ul>li:gt(0) > a')

jsfiddle .
This will make use of the :gt selector.

$('#menu>ul>li:not(:first) > a')

jsfiddle .
while this is a combination of the :first and the :not . jsfiddle.

Edit 2:
Ok sorry, now I understand the requirements of the question.

Joel's solution works, but if you wanted to do the whole thing in the selector, you can do the following:

$('#menu > ul > li:has(ul) > a')

jsfiddle .
This will make use of the the :has selector. I tend to prefer this solution, for the single fact that, if I needed to return to this code later on, or someone else wanted to review the code, the goal of the selector can be easily understood by reading it.

I am selecting an anchor inside a list item which contains an unordered list , etc...

Answer 3

Try this one:

$('#menu ul:first > li > a')

Updated fiddle .

Answer 4

i think this works:

but only for jquery 1.4 and higher

$("#menu ul li ul li").hover(function(){});

Answer 5

try this demo

$('#menu ul li a').hover(

    function(e) {
      change = $(this).parent().find(".sub-nav").length;
      if(change)
      {
        $('.toto').css({'background-color':'#cccccc'});
      }

    },
    function() { $('.toto').css({'background-color':'#f8f8f8'}); }
 );