javascript - 如何在鼠标悬停在另一个标签上时切换 div 的可见性

Question

我会尽量简单，我试图在有人将鼠标悬停在标签上时在 div 上实现一个简单的可见性切换，有点像这个链接上的四个按钮:

http://www.bt.com/help/home/

现在的问题是我希望它出现或希望它在标记的鼠标悬停时可见，但是当我隐藏 div 时它永远不会回来，我尝试了多种方法，有些是

$("#function").on("mouseover",this, function () {
            $(this).addClass("show");
        })
        $("#function").on("mouseout",this, function () {
            $(this).removeClass("show");
            $(this).addClass("hide");
        })

另一个是:

$("#function").hover(
                  function () {
                    $(this).addClass("hide");
                  },
                  function () {
                    $(this).removeClass("hide");
                  }

        );

还有

$("#butt").on("mouseover", this, function(){
                $(this).find("div#function").show();
                //$("#function").toggleClass("visible");
            });
            $("#butt").on("mouseout", this, function(){
                $(this).find("div#function").hide();
                //$("#function").toggleClass("visible");
            });

Answer 1

您应该使用 mouseenter 而不是 mouseover。这是因为当您在元素内移动时会触发 mouseover 事件。转到此处并滚动到底部以检查 mouseover 和 mouseenter 之间的区别。 http://api.jquery.com/mouseenter

mouseenter事件只有当你进入元素时才会被触发，而不是在元素内移动。

这就是您想要的解决方案。它与您提供的网站几乎相似。
JavaScript

<script>
$(document).ready(function()
{
    $("#function").mouseenter(function(event)
    {
        event.stopPropagation()
        $(this).addClass("show");
    }).mouseleave(function(event)
    {
        event.stopPropagation()
        $(this).removeClass("show");
    })
});
</script>

风格

<style>    
.functionBlock { width:200px; height:200px; border:1px solid #CCC; padding:15px;}
.functionBlock ul { visibility: hidden}
.functionBlock.show ul { visibility: visible;}
</style>

HTML

<div id="function" class="functionBlock">
    <h5>Demo </h5>
    <ul>
        <li>APPLE</li>
        <li>SAMSUNG</li>
    </ul>
</div>

jsFiddle 上的示例 http://jsfiddle.net/TAZmt/1/