僅當懸停被刪除時淡出

我有一個應該只在懸停時纔出現的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

僅當懸停被刪除時淡出

回答

相關問題