仅当悬停被删除时淡出

我有一个应该只在悬停时才出现的div。但是当我加载页面时，动画也会出现。我想要隐藏动画div，直到我将鼠标悬停在其他div上。有没有办法阻止页面加载时运行动画？仅当悬停被删除时淡出

这里是CSS：

#dim { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background: rgba(200, 200, 200, 0.8); 
    z-index:100; 
    padding: 5%; 

    animation: fadeout 1s; 
    animation-fill-mode: forwards; 
} 

#dim:hover{ 
    animation: fadein 1s; 
    animation-fill-mode: forwards; 
} 

/* Animations */ 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

@keyframes fadeout { 
    from { opacity: 1; } 
    to { opacity: 0; } 
}

这里是一个CodePen：https://codepen.io/Martin36/pen/gWwmZO

来源

2017-04-24 martin36

https://codepen.io/anon/pen/RVGVoW – Morpheus

可能重复[如何对防止-CSS-关键帧-animation-to-run-on-page-load]（http://stackoverflow.com/questions/27938900/how-to-prevent-css-keyframe-animation-to-run-on-page-load） – LGSon

在关键帧代替，你可以使用CSS过渡并给出0默认不透明度来解决这个问题。

#dim { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background: rgba(200, 200, 200, 0.8); 
    z-index:100; 
    padding: 5%; 
    opacity: 0; 
    -webkit-transition: opacity 1s; /* Safari */ 
    transition: opacity 1s; 
} 

#dim:hover{ 
    opacity: 1; 
}

来源

2017-04-24 13:16:30 Bram

那个是很棒的！更少的代码也。非常感谢你。 – martin36

很高兴我能帮助你。你能把这个帖子标记为你的最终答案吗？谢谢！你可以在https://www.w3schools.com/css/css3_transitions.asp找到更多关于css转换的信息。我使用它们很多。 – Bram

div{ 
 
    height:100vh; 
 
    width:100vw 
 
} 
 

 
#dim { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width:100%; 
 
    height:100%; 
 
    background: rgba(200, 200, 200, 0.8); 
 
    z-index:100; 
 
    padding: 5%; 
 
    opacity:0 ; 
 
    
 
    -webkit-transition: opacity 1s; /* Safari */ 
 
    transition: opacity 1s; 
 

 
    
 
} 
 

 
#dim:hover{ 
 
    opacity: 1; 
 
} 
 

 
/* Animations */ 
 

 
@keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 

 
/* Firefox < 16 */ 
 
@-moz-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 

 
/* Safari, Chrome and Opera > 12.1 */ 
 
@-webkit-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 

 
/* Internet Explorer */ 
 
@-ms-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 

 
/* Opera < 12.1 */ 
 
@-o-keyframes fadein { 
 
    from { opacity: 0; } 
 
    to { opacity: 1; } 
 
} 
 

 

 
@keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
/* Firefox < 16 */ 
 
@-moz-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
/* Safari, Chrome and Opera > 12.1 */ 
 
@-webkit-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
/* Internet Explorer */ 
 
@-ms-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
} 
 

 
/* Opera < 12.1 */ 
 
@-o-keyframes fadeout { 
 
    from { opacity: 1; } 
 
    to { opacity: 0; } 
 
}

<div> 
 
    <div style="background-color:red"></div> 
 
    <div id="dim"> 
 
    <h1 class="header">Name of project</h1> 
 
    <div class="description"> 
 
     Description of project 
 
    </div> 
 
    </div> 
 
</div>

检查现在......

来源

2017-04-24 13:17:51

我不淡出。 – martin36

更新..立即查看 – 2017-04-24 13:23:24

现在，它的工作原理，谢谢。 – martin36

仅当悬停被删除时淡出

回答

相关问题