-1

小提琴和代码不言自明。我有一个悬停菜单，当 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/

4

3 回答 3

2

因为当你的光标离开锚点的那一刻，你就不再悬停它了。

您应该设计菜单，使“子菜单”位于父级内部。但是不要ul在锚点内部放置一个 div 以获得更好的结构。

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

您可以观察div:hover然后显示 sub ul。只要您超过 div 的任何孩子，div 就不会关闭。

看到这个修改过的小提琴：http: //jsfiddle.net/dLKYh/3/

于 2013-11-09T07:51:02.140 回答
1

你告诉它这样做：

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

如果您将鼠标移出 $(".dropdown-toggle-products")，则 ul 将淡出。

于 2013-11-09T07:50:53.293 回答
0

请试试这个：

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();
    });
});
于 2013-11-09T09:12:45.520 回答