嗨首先这是我的代码-
<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