0

標準の HTML ul ツリーがあります。

<ul id="catTree">
    <li>Header 1 <span>(blah)</span>
        <ul>
            <li>Branch 1 <span>(blah)</span></li>
            <li>Branch2 <span>(blah)</span></li>

...そしていくつかのjQuery：

    $('#catTree li').hover(
        function() {
            $(this).children('span').css('display','inline');
        },
        function() {
            $(this).children('span').css('display','none');
        }
    );

デフォルトの CSS はスパンを非表示にし、jQuery はスパンを表示します。実際のブランチがホバリングされているだけでなく、すべての親にもスパンが表示されることを除いて、正常に機能します。ホバーすると、次のようになります。

Header 1 (blah)
    Branch1 (blah)

それよりも

Header1
    Branch1 (blah)

理由はわかりますが (両方の LI がホバーされているため)、親でホバーを起動しないように jQuery に指示するにはどうすればよいですか?

4

3 に答える 3

1

たぶん、伝播を停止した場合:

$('#catTree li').hover(
        function(e) {
            e.stopPropagation();
            $(this).children('span').css('display','inline');
        },
        function(e) {
            e.stopPropagation();
            $(this).children('span').css('display','none');
        }
    );

http://jsfiddle.net/techunter/B5ZwE/

ただし、最初にヘッダーにカーソルを合わせてから、その子にカーソルを合わせても、ホバリングアウトとは見なされません。

于 2012-08-09T12:24:15.377 に答える
1

あなたが使用することができます：

//Note the selector.
//Only the children li's will be selected
$('#catTree ul > li').hover(
  function() {
    $(this).children('span').css('display','inline');
  },
  function() {
    $(this).children('span').css('display','none');
  }
);
于 2012-08-09T12:21:29.453 に答える
0

何年も考えて、30秒後に投稿してから解決しました...

LI にカーソルを合わせないでください (親 LI が子をカバーするため)。代わりに、余分なスパンにカーソルを合わせます。

<ul id="catTree">
<li><span>Header 1 <span>(blah)</span> </span>
    <ul>
        <li><span>Branch 1 <span>(blah)</span> </span></li>
        <li><span>Branch2 <span>(blah)</span></span></li>

と

       $(function() {
    $('#catTree li>span').hover(
        function() {
            $(this).children('span').css('display','inline');
        },
        function() {
            $(this).children('span').css('display','none');
        }
    );

});
于 2012-08-09T12:33:21.073 に答える