0

我将尝试尽可能简单，当有人将鼠标悬停在 a 标签上时，我试图在 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");
            });
4

6 回答 6

2

您应该使用 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/

于 2013-02-26T08:36:34.080 回答
0

你在这里不需要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玩。

于 2013-02-26T08:50:27.257 回答
0

这应该这样做。检查jsfiddle。这里的基本思想是在事件的根div中添加一个类（.shown），mouseenter然后这个类使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");
       }
    );
});
于 2013-02-26T08:35:43.787 回答
0

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

$("#butt")
  .mouseover(function () {
    $("#function").show();
  })
  .mouseout(function () {
    $("#function").hide();
  });
于 2013-02-26T08:27:15.207 回答
0 
$("#link").hover(function(){
    $("#DIV").slideToggle();
});

和 html 是

<a href="#" id="link">LINK</a>
<div id="DIV" style="display:none">Your content in it</div>
于 2013-02-26T08:38:56.537 回答
-1

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

只需将以下代码放在您的<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>
于 2013-02-26T08:32:20.637 回答