Question

我尝试使用CSS在hover上使div消失，但是当再次移动鼠标时我不希望它重新出现。我知道我可以用这样的Javascript来做到这一点：

function CloseRegister() {
    var regdiv = document.getElementById("register");
    register.style.display = "none";
}

但是我希望它有CSS转换，所以它失去它需要2秒才能消失（不再重新出现）..

这是我迄今为止所尝试过的：

<style type="text/css">
.register
{
    background-color:Purple;
    transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
}
.register:hover
{
    opacity:0;
}
</style>

<div id="register" class="register" style="position:fixed; width:50%; height:50%; top:25%; left:25%;"></div>

编辑：

使用@ GolezTrol的帮助修正了它：

＆＃13;

function CloseRegister() {
    var regdiv = document.getElementById("register");
    register.onmouseup = function () {
        register.onmouseup = null;
        register.classList.add('hovered');
        setTimeout(function () { register.style.display = 'none'; }, 2000);
    }
}

＆＃13;

.register
{
    background-color:Purple;
    transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
}
.register.hovered
{
    background-color:transparent;
}

＆＃13;

<div onmousedown="CloseRegister()" id="register" class="register" style="position:fixed; width:50%; height:50%; top:25%; left:25%;"></div>

＆＃13;

Answer 1

如果您仍在使用JavaScript，则可以使用onmouseover事件。当该事件第一次发生时，您可以添加一个运行CSS转换的类。

var regdiv = document.getElementById("register");

var hoverEvent = function(){
    // Remove the event so it doesn't get called a million times while fading.
    register.removeEventListener('mouseover', hoverEvent);
    // Add the class that takes care of the animation.
    register.classList.add('hovered');
  
    // After a while, still add 'display: none' to remove the element from flow, if needed.
    setTimeout(2000, function(){register.style.display = 'none';})
};

register.addEventListener('mouseover', hoverEvent);

.register
{
    background-color:Purple;
    transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
}
.register.hovered
{
    opacity:0;
}

<div id="register" class="register" style="position:fixed; width:50%; height:50%; top:25%; left:25%;"></div>

Answer 2

最好的方法是收听transitionend和remove

＆＃13;

$("#register").hover(function(){ 
  $(this).addClass("delete");
  $(this,".delete").on('transitionend webkitTransitionEnd oTransitionEnd', function () {
    $(this).remove()
 });
})

＆＃13;

.register
{
    background-color:Purple;
    transition: 2s;
    -o-transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
}
.register.delete
{
    opacity:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="register" class="register" style="position:fixed; width:50%; height:50%; top:25%; left:25%;"></div>

＆＃13;

Answer 3

第一篇文章误解了。这与CSS3动画具有相同的结果，但在旧版本的IE中不受支持。

.register
{
    background-color:Purple; 
}
.hovered-anim
{
    animation-name: example;
    animation-duration: 2s;
    -webkit-animation-delay: 0s !important;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode: forwards;
}
@keyframes example {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes example {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

jQuery的：

 $(".register").hover(function(){ 
    $(this).addClass("hovered-anim");
});

你可以在这里查看小提琴：

https://jsfiddle.net/tc78axye/2/

Answer 4

你也可以设置

 .register:hover {
 opacity:0
 }

如果您想在不使用JavaScript的情况下保留布局，请

到display:none或visibility:hidden;

让div在悬停时消失

编辑：

4 个答案: