Javascript 如何在另一个标签上方的鼠标上切换div的可见性

我将尽可能简单，当有人将鼠标移到a标记上时，我将尝试在div上实现一个简单的可见性切换，有点像这个链接上的四个按钮：

现在的问题是，我希望它出现在标签上方的鼠标上，或者希望它可见，但一旦我隐藏了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");
            });

---

我知道了，选择器有点变化

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

---

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

只需将以下代码放在您的

标记下面：

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

功能切换（id）{
var e=document.getElementById（id）；
如果（e.style.display=='block'）
e、 style.display='none'；
其他的
e、 style.display='block'；
}

这是一个链接和切换的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>

此分区已“切换”

这应该可以。检查JSFIDLE。这里的基本思想是在

mouseenter

事件中将一个类（.show）添加到根div中，该类然后使div中隐藏的

由于以下原因显示出来

.shown ul{
    display: block !important;
}

编辑：

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

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

---

你应该使用鼠标指针而不是鼠标指针。这是因为当您在元素内移动时，将触发鼠标悬停事件。转到此处并滚动至底部，以检查mouseover和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>

$（文档）.ready（函数（）
{
$（“#函数”）.mouseenter（函数（事件）
{
event.stopPropagation（）
$（this.addClass（“show”）；
}).mouseleave（功能（事件）
{
event.stopPropagation（）
$（this.removeClass（“show”）；
})
});

风格

.functionBlock{宽度：200px；高度：200px；边框：1px实心#CCC；填充：15px；}
.functionBlock ul{可见性：隐藏}
.functionBlock.show ul{可见性：可见；}

HTML

演示

苹果
三星

jsFiddle上的示例

html是

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

你的内容在里面

这里不需要Javascript。这仅在CSS中是可能的

HTML:

---

和播放。

在这些尝试中，您是从阅读文档开始的，还是只是在上尝试其中一个示例，还是打开控制台（F12）检查错误（有几个错误）？我认为，您不能“取消覆盖”一个不可见的元素。试着让它完全透明。正如我提到的，一旦我添加或在代码中提到，类隐藏被添加，它永远不会回来，即使在鼠标上，它也不会…@Hunain-Duh，它是隐藏的，你怎么期望鼠标移动到不存在的东西上？更改后的代码正在工作，但是如果你看到我的参考网站，mouseover/mouseenter a标记位于toggling div下面，现在当我将鼠标移到a标记上时，它会连续切换，不会停止；将此切换div放置在任何其他位置都可以实现功能更改后的代码正在工作，但如果您看到我的参考网站，鼠标悬停/鼠标悬停a标记位于切换div下方，现在当我将鼠标悬停a标记时，它将不停地连续切换；将此切换div放置在其他任何位置可实现此功能您是否将事件更改为mouseenter而不是mouseover？这是因为当您在元素内移动时，将触发鼠标悬停事件。转到此处并滚动至底部，以检查mouseover和mouseenter之间的差异。mouseenter事件将仅在您输入元素时触发，但不会在元素内移动。更改的代码正在工作，但如果您看到我的参考网站，mouseover/mouseenter a标记位于切换div下，现在当我将鼠标移到a标记上时，它将不停地连续切换；将此切换div放置在任何其他位置都可以实现该功能

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

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

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

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

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

.info {
    display: none;
}

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

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