如何使div在悬停时显示并在悬停时消失？

Question

hi first of all this is my code - 嗨，首先，这是我的代码-

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

i made a div by the id eiv which slides on left side on hover of colo and slides back out on mouseout from colo , this all is fine but i want that after making it appear it should stay there when we mouseover on eiv and slide out on mouseout from eiv( when eiv slides in it will overlap colo) and then when you again mouse in on colo then eiv appears 我通过id eiv做了一个div，它在colo悬停时在左侧滑动，并在从colo移出mouseout时滑出，这一切都很好，但是我希望在显示它之后，当我们将鼠标悬停在eiv上并滑出时，它应该留在那里从eiv滑出鼠标时（当eiv滑入时将与colo重叠），然后再次在colo上滑鼠时，出现eiv

this is somewhat like the charmsbar in windows 8 这有点像Windows 8中的charmsbar

Answer 1

You can't do that, because if your div become hide, you never trigger hover event. 您不能这样做，因为如果您的div隐藏，您就永远不会触发悬停事件。

So I suggest that you change of the color div to the same color of the background-color of your site or change to transparent. 因此，我建议您将div的颜色更改为与网站背景色相同的颜色，或更改为透明。

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

See the example 看例子

Answer 2

If I understood your question correctly, then this might help you. 如果我正确理解了您的问题，那么可能会对您有所帮助。

You can create something using JQuery and hover. 您可以使用JQuery并将鼠标悬停。 This way. 这条路。

You have to have an element outside the div you want to hide. 您必须在要隐藏的div之外有一个元素。

In this example, I use div="target1" as an outside element to hide the div="msg1" 在此示例中，我使用div="target1"作为外部元素来隐藏div="msg1"

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

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

如何使div在悬停时显示并在悬停时消失？

问题描述

2 个解决方案

解决方案1
0 2013-10-06 14:39:52

解决方案2
0 2013-10-06 15:02:33

如何使div在悬停时显示并在悬停时消失？

问题描述

2 个解决方案

解决方案1 0 2013-10-06 14:39:52

解决方案2 0 2013-10-06 15:02:33

解决方案1
0 2013-10-06 14:39:52

解决方案2
0 2013-10-06 15:02:33