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 回答