如何让 div 在悬停时出现并在悬停时消失？答案

【问题标题】：how to make a div appear on hover and disappear on hover out?如何让 div 在悬停时出现并在悬停时消失？
【发布时间】：2013-10-06 14:27:45
【问题描述】：

嗨，首先这是我的代码 -

<script>
function slide() {
    if(document.getElementById('eiv').className == 'deactive') {
        document.getElementById('eiv' ).className = 'active';
        document.getElementById('eiv').style.webkitTransition ='all 0.5s';
    } else {
        document.getElementById("eiv").className = 'deactive';
        document.getElementById('eiv').style.webkitTransition ='all 0.5s';
    }
}
function slideout() {
    if(document.getElementById('eiv').className == 'active') {
        document.getElementById('eiv' ).className = 'deactive';
        document.getElementById('eiv').style.webkitTransition ='all 0.5s';
    } else {
        document.getElementById("eiv").className = 'active';
        document.getElementById('eiv').style.webkitTransition ='all 0.5s';
    }
}
</script>
<body>
<span id="container"><div id="colo" onmouseover="slide()" onmouseout="slideout()">lololol</div>
</body>

我通过 id eiv 创建了一个 div，它在 colo 悬停时在左侧滑动，并在 colo 鼠标移出时滑回，这一切都很好，但我希望在让它出现后，当我们将鼠标悬停在 eiv 上时它应该留在那里并从eiv滑出mouseout（当eiv滑入时，它将与colo重叠），然后当您再次将鼠标移入colo时，eiv出现

这有点像 Windows 8 中的超级按钮

【问题讨论】：

请将一个答案标记为已接受，以便您可以帮助其他人。

标签： javascript menu hover toggle

【解决方案1】：

你不能这样做，因为如果你的 div 被隐藏，你永远不会触发悬停事件。

所以我建议你将颜色 div 更改为与网站背景颜色相同的颜色或更改为透明。

.visibleDiv{
  background-color:yellow;
  height:100px;
  display:block;
}
.visibleDiv:hover{
  background-color:white;
  height:100px;
  display:block;
}

见example

【讨论】：

【解决方案2】：

如果我正确理解了您的问题，那么这可能会对您有所帮助。

您可以使用 JQuery 创建一些东西并悬停。这边走。

您必须在要隐藏的 div 之外有一个元素。

在这个例子中，我使用div="target1"作为外部元素来隐藏 div="msg1"

<div id="target1">Hover here for .hover()</div>
<div id="msg1"></div>

$("#target1").hover(function () {
    $("#msg1").toggle();
});

【讨论】：