Question

首先，这是我的代码 -

<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中的charmsbar

Answer 1

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

因此，我建议您将颜色div更改为网站背景颜色的相同颜色，或者更改为透明。

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

请参阅example

Answer 2

如果我理解你的问题，那么这可能对你有帮助。

您可以使用JQuery创建一些内容并悬停。这条路。

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

在此示例中，我使用div="target1"作为隐藏的外部元素 div="msg1"

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

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

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

2 个答案: