Question

<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".link").click(function(){
            $(".myList").show();
            $(".link1").click(function(){
                $(".myList").hide();
            });
        });
    });
</script>
</head>
<body>
<div class="myDiv"> <a href="#." class="link">Text</a>
<div class="mylist" style="display:none;"> <a href="#." class="link1">Text</a> <a href="#." class="link1">Text</a> <a href="#."class="link1">Text</a> </div>
</div>
</body>
</html>

我想在鼠标输出时隐藏列表面板，目前我可以在点击任何链接时隐藏它但是也想在鼠标上输出...

Answer 1

只需将click事件更改为mouseout; - ）。

$(".link1").mouseout(function(){
    $(".myList").hide()
}

Answer 2

$(".link").click(function(ev){ 
    $(".myList").show();
    ev.preventDefault();
});
$(".link1").mouseout(function(){
    $(".myList").hide();
});

你也有一个错字：mylist＆amp; myList中

试试这个。

$(".link").click(function(ev){ 
    $(".myList").show();
    ev.preventDefault();
});
$(".myList").mouseleave(function(){
    $(".myList").hide();
});

Answer 3

尝试使用此代替http://jsfiddle.net/G28aH/3/

Answer 4

尝试

$('.myList').mouseout(function() { $(this).hide(); });

Answer 5

如果你不使用动画，我认为最好使用CSS：hover伪类来完成这项任务。但是如果你想使用jQuery然后使用mouseout事件。但是为了防止下移在移动时消失，你应该在.myDiv上绑定事件。

$('.myDiv').mouseout(function(){
    $(".myList").hide()
})

此外，你可以尝试hoverIntent插件，这是完全符合我的需求。它会延迟显示和隐藏，以防止意外消失。

http://cherne.net/brian/resources/jquery.hoverIntent.html

Jquery show hide单链接菜单 - 无法隐藏鼠标

5 个答案: