Question

我试图在悬停时获得fadeIn ul #access ul li:hover > ul的基本fadeOut，然后在{1}}将其悬停。我有这个代码，但它不起作用：

jQuery(document).ready(function(){
    jQuery("#access ul li").hover(function() {
            jQuery(this).children("ul").fadeIn(500);
        }, function() {
            jQuery(this).children("ul").fadeOut(500);
    });
});

下面的代码很有用，但是因为我不仅仅影响this个孩子而有问题：

jQuery(document).ready(function(){
    jQuery("#access ul li").hover(function() {
            jQuery(this).children("ul").fadeIn(500).animate({top: '-=10'}, 500, function() { });
        }, function() {
            jQuery("#access ul li > ul").fadeOut(500).animate({top: '+=10'}, 500, function() { });
    });
});

有没有人知道为什么顶级版本不起作用？

这是HTML：

<nav id="access" role="navigation">
    <div class="menu"><ul>
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="Sample Page">Sample Page</a>
            <ul class='children'>
                <li><a href="#"; title="About Me">About Me</a></li>
                <li><a href="#" title="Another Page">Another Page</a></li>
            </ul>
        </li>
    </ul></div>
</nav>

Answer 1

听起来很奇怪，这对我来说很好：

http://jsfiddle.net/tAUw4/

<div id="access">
    <ul>
        <li>
            Foo
            <ul>
                <li>Foo - 1</li>
                <li>Foo - 2</li>
                <li>Foo - 3</li>
            </ul>
        </li>
        <li>
            Bar
            <ul>
                <li>Bar - 1</li>
                <li>Bar - 2</li>
                <li>Bar - 3</li>
            </ul>
        </li>
        <li>
            Baz
            <ul>
                <li>Baz - 1</li>
                <li>Baz - 2</li>
                <li>Baz - 3</li>
            </ul>
        </li>
    </ul>
</div>

$(function () {
    $('#access li').hover(function () {
        $(this).children('ul').fadeIn();
    }, function () {
        $(this).children('ul').fadeOut();
    });
});

ul ul {
    display: none;
}

Answer 2

没有任何html它只是猜测，但我相信问题是覆盖悬停事件处理程序所附加的原始元素或类似的元素。

也许这样的事情会起作用：

$(function() {
     $("#access ul li").mouseenter(function() {
         $('ul', this).fadeIn(500);
     });
     $("#access ul li > ul:visible").mouseleave(function() {
         $(this).fadeOut(500);

     });
});

如果某些#access ul li ul元素默认可见，您可以尝试将this元素从mouseenter存储到变量或jQuery的数据中，并使用mouseleave函数中的元素来定位正确的元件。

最好的选择当然是构建你的html和css以使其以常规方式工作。

如何在父母悬停时淡入/淡出菜单中的儿童

2 个答案: