Hover上的Jquery Toggle（）

Question

好的，所以我搜索并尝试了几个例子，但没有一个有效。我正在使用Jquery toggle()在点击时显示DIV。它工作正常，除了我想在悬停时显示它并保持打开如果鼠标指针在Div内。

这是我的代码：

Jquery的：

$(function() {
    $('#HCLink').click(function() {
        $('.HCContent').toggle('slow');
        return false;
    });
});

HTML：

<li><a href="#" id="HCLink">HEATING & COOLING | </a> </li>
<div class="HCContent" style="display:none;">
    <p>Div Content...</p>
</div>

尝试将.click更改为.hover，但无法正常工作。

Answer 1

在容器LI元素上设置mousenter / mouseleave，例如使用hover()输入/输出处理程序：

$("li").hover(function () {
     $(".HCContent").stop().toggle("slow");
});

-jsFiddle-

Answer 2

使用hide / show代替：

$(function() {
    $('#HCLink').on('mouseover', function() {
        $('.HCContent').show('slow');
        return false;
    });
    $('#HCLink').on('mouseout', function() {
        $('.HCContent').hide('slow');
        return false;
    });

});

小提琴：

http://jsfiddle.net/brettwgreen/2b7xL51m/

Answer 3

你可以试试这个;

http://jsfiddle.net/redeown5/2/

您可以将mouseleave事件用于父元素。

Answer 4

看看。

$("#HCLink").on("mouseenter",function(){
    $(".HCContent").show("slow");
});

http://jsfiddle.net/tk5rr4bb/1/

注意使用mouseenter而不是mouseover

原因：https://stackoverflow.com/a/7286680/2956107