jQueryの子供（他のUL）を強調表示せずにリスト項目をハイライト表示

Question

私はホバー効果をULに適用しようとしていますが、1つのリスト項目の子であるULも効果を得ています。欲しい。私は> signと.not（）セレクタを使って、しかしsuccesを使わずに、あらゆる種類のものを試しました。

 <ul id="menu"> 
      <li class="menubox"><a href="#">Home</a></li> 
      <li class="menubox"><a href="#">Over Ons</a></li> 
      <li class="menubox"><a href="#" id="varianten">Producten</a> 
       <ul id="menu_varianten"> 
        <li><a href="#">1</a></li> 
        <li><a href="#">2</a></li> 
        <li><a href="#">3</a></li> 
       </ul> 
      </li> 
      <li class="menubox"><a href="#">Forum</a></li> 
     </ul> 

関連するかもしれないCSSのいくつか抜粋：

#menu { 
position: relative; 
width: 250px; 
} 

ul#menu{ 
list-style: none; 
margin-left: 0; 
padding-left: 0; 
} 

ul#menu li a{ 
display: block; 
text-decoration: none; 
height: 40px; 
} 

#menu_varianten{ 
list-style: none; 
display: none; 
margin-left: 0; 
padding-left: 0; 
} 

ul#menu_varianten li a{ 
padding-left: 4em; 
height:30px; 
} 

そしてここでjQueryのです：

$("ul#menu > li").hover(
    function() { 
     $(this).stop(true, true).animate({fontSize:"1.4em"}, 150); 
    }, 
    function() { 
     $(this).stop(true, true).animate({fontSize:"1.0em"}, 150); 
    }); 

私も試してみました。ここ

は私の（簡体字）HTMLですセレクタ（ "ul＃menu> li"）ではなく（ "＃menu_varianten"）、残念ながら動作しません。誰かがアイデアを持っている？

Answer 1

最初のアンカーのみを拡張できます。

彼らがそうであるように、あなたのHTMLとCSSを残すとするためにJavaScriptを変更します。

$("ul#menu li").hover(

function() { 
    $(this).find('a').first().stop(true, true).animate({ 
     fontSize: "1.4em" 
    }, 150); 
}, function() { 
    $(this).find('a').first().stop(true, true).animate({ 
     fontSize: "1.0em" 
    }, 150); 
}); 

http://jsfiddle.net/RCtFU/1/

Answer 2

各サブメニューを各親のの兄弟にすることができます。 CSSは継承するので、これは問題のかなり簡単な回避になります。

例：あなたはメニューとサブメニューを区別するために、いくつかの更なる調整（異なるクラスなど）を行う必要がありますhttp://jsfiddle.net/RCtFU/

<li class="menubox"> 
    <a href="#" id="varianten">Producten</a> 
</li> 
<li class="menubox"> <!-- probably want to change the class --> 
    <ul id="menu_varianten"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
    </ul> 
</li> 

。

Answer 3

あなたはCSS3セレクター:not()使用することができます。

$("ul#menu > li :not(ul)").hover(
function() { 
    $(this).stop(true, true).animate({ 
     fontSize: "1.4em" 
    }, 150); 
}, function() { 
    $(this).stop(true, true).animate({ 
     fontSize: "1.0em" 
    }, 150); 
}); 

はjsFiddleを参照してください。