0

嗨首先这是我的代码-

<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 鼠标移出（当 eiv 滑入时，它将与 colo 重叠），然后当您再次将鼠标移入 colo 时，出现 eiv

这有点像windows 8中的charmsbar

4

2 回答 2

0

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

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

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

看例子

于 2013-10-06T14:39:52.250 回答
0

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

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

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

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

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

$("#target1").hover(function () {
    $("#msg1").toggle();
});
于 2013-10-06T15:02:33.780 回答