小提琴

Question

小提琴和代码说明了一切。我有一个悬停菜单，当div打开并且我尝试将鼠标移动到它时，它会关闭。

<html>
<head>
    <script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
    <script>
        $(document).ready(function(){
            $(".dropdown-toggle-products").hoverIntent(makeVisible,makeInvisible);
        }); // close document.ready
        function makeVisible() {
            $(".dropdown-menu.all-products-dropdown").fadeIn(100);
        }
        function makeInvisible() {
            $(".dropdown-menu.all-products-dropdown").fadeOut(100);
        }
    </script>
</head>
<body>
    <a role="button" class="dropdown-toggle-products">Hover me <b class="caret header"></b></a>
    <ul class="dropdown-menu all-products-dropdown">
        <li><a href="#">Now try to hover me</a></li>
    </ul>
</body>
</html>

小提琴

http://jsfiddle.net/dLKYh/1/

Answer 1

因为光标离开锚点的那一刻，你不再徘徊它了。

您应该设计菜单，以便“子菜单”位于父级内部。不要将ul放在锚点内，为了更好的结构而做一个div。

<div><a></a><ul>...</ul>

您可以查看div:hover，然后显示子ul。只要你超过div的任何一个孩子，div就不会关闭。

请参阅此修订后的小提琴：http://jsfiddle.net/dLKYh/3/

Answer 2

你告诉它要做到这一点：

function makeInvisible() {
                   $(".dropdown-menu.all-products-dropdown").fadeOut(100);}

如果您将$（“。dropdown-toggle-products”）鼠标移出，则ul会淡出。

Answer 3

请试试这个：

For the link [http://jsfiddle.net/dLKYh/1/][1]:

 $(".dropdown-toggle-products").hoverIntent(makeVisible,makeVisible);

For the link [http://jsfiddle.net/dLKYh/3/][2] :    

$(function(){
    $('div').hover(
        function(){
        $(this).find('ul').show();
    });
});

当我尝试将鼠标移动到它时，悬停菜单关闭了孩子...为什么？ [的jsfiddle]

小提琴

3 个答案: