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和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/

的示例

Answer 2

我明白了，选择器的细微变化

$("#butt")
  .mouseover(function () {
    $("#function").show();
  })
  .mouseout(function () {
    $("#function").hide();
  });

Answer 3

这应该这样做。检查jsfiddle。这里的基本想法是在mouseenter事件的root-div中添加一个类（.shown），然后这个类使得div中隐藏的<ul>显示为。

.shown ul{
    display: block !important;
}

http://jsfiddle.net/28bb8/2/

编辑：

进行一些小的CSS更改，以更好地反映您正在寻找的行为，但您必须更改css以基本适应您自己的代码。我希望这会有所帮助。

$("document").ready(function(){
    $(".wrap").hover(
        function () {
            $(this).addClass("shown");
       },
       function () {
           $(this).removeClass("shown");
       }
    );
});

Answer 4

$("#link").hover(function(){
    $("#DIV").slideToggle();
});

和html是

<a href="#" id="link">LINK</a>
<div id="DIV" style="display:none">Your content in it</div>

Answer 5

您在这里不需要Javascript。仅使用CSS

就可以实现这一点

HTML：

<div class="panel">
    <div class="teaser"><img src="http://lorempixel.com/300/400"/></div>
    <div class="info">
        <ul>
            <li>Go here ...</li>
            <li>Or there ...</li>
        </ul>
    </div>
</div>

CSS：

.panel {
    width: 300px;
    height: 400px;
}

.info {
    display: none;
}

.panel:hover .teaser {
    display: none;
}

.panel:hover .info {
    display: block;
}

和JSFiddle进行比赛。

Answer 6

我希望这是您正在寻找的解决方案。

只需将以下代码放在<body>标记下方：

<script type="text/javascript">
function toggle(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
</script>

这是一个链接和切换的div：

<a href="javascript: return false();" onmouseover="toggle('toggleme');">
    Mouseover this link to toggle the visibility of #toggleme
</a>
<div id="toggleme">This div is "toggled"</div>

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

6 个答案: