CSS3: Beim Hover einblenden und ausblenden, wenn der Hover verschwunden ist

Question

Ich habe ein Div. Wenn ich darauf schwebe, sollte es mit dem fadeIn-Effekt erscheinen und wenn ich die Maus entferne, sollte es mit dem fadeOut-Effekt verschwinden.

Ich habe den folgenden Code ausprobiert.

.main_div{ 
 
width:100px; 
 
height:100px; 
 
border:thin black solid; 
 
position:relative; 
 

 
} 
 

 
.main_div .overlay_div{ 
 
position:absolute; 
 
top:0; 
 
right:0; 
 
bottom:0; 
 
left:0; 
 
width:100%; 
 
height:100%; 
 
display:none; 
 
background:rgba(0,0,0,0.5); 
 
opacity: 0; 
 
transition: opacity; 
 
transition-timing-function: ease-out; 
 
transition-duration: 100ms; 
 
transition-delay: 1s; 
 
    
 
-ms-transition: opacity; 
 
-ms-transition-timing-function: ease-out; 
 
-ms-transition-duration: 100ms; 
 
-ms-transition-delay: 1s; 
 
    
 
-moz-transition: opacity; 
 
-moz-transition-timing-function: ease-out; 
 
-moz-transition-duration: 100ms; 
 
-moz-transition-delay: 1s; 
 
    
 
-webkit-transition: opacity; 
 
-webkit-transition-timing-function: ease-out; 
 
-webkit-transition-duration: 100ms; 
 
-webkit-transition-delay: 1s;  
 

 

 
} 
 

 
.main_div:hover .overlay_div{ 
 
display:block; 
 

 
opacity: 1; 
 

 
/* Fade in */ 
 
transition: opacity; 
 
transition-timing-function: ease-out; 
 
transition-duration: 100ms; 
 

 
-ms-transition:opacity; 
 
-ms-transition-timing-function: ease-out; 
 
-ms-transition-duration: 100ms; 
 

 
-moz-transition:opacity; 
 
-moz-transition-timing-function: ease-out; 
 
-moz-transition-duration: 100ms; 
 

 
-webkit-transition: opacity; 
 
-webkit-transition-timing-function: ease-out; 
 
-webkit-transition-duration: 100ms; 
 

 
}

<div class="main_div"> 
 
    <div class="overlay_div"> 
 
    some text 
 
    </div> 
 
</div>

Jede mögliche Hilfe würde groß sein.

Vielen Dank.

Answer 1

CSS-Übergänge funktionieren nicht unter Sie können diesen Effekt mit visibility/opacity Eigenschaften erzielen.

Überprüfen Sie dieses Beispiel. Sie können die transition-delay-Eigenschaft manuell hinzufügen, wenn Sie sie wirklich hinzufügen möchten.

.main_div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: thin black solid; 
 
    position: relative; 
 
} 
 

 
.main_div .overlay_div { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all 1s ease-out; 
 
} 
 

 
.main_div:hover .overlay_div { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: all 1s ease-in; 
 
}

<div class="main_div"> 
 
    <div class="overlay_div"> 
 
    some text 
 
    </div> 
 
</div>

Answer 2

-Code funktionieren nur Anzeige none-block ändern, als Übergang funktioniert nicht, wenn display ändern.

.main_div .overlay_div{ 
position:absolute; 
top:0; 
right:0; 
bottom:0; 
left:0; 
width:100%; 
height:100%; 
display:block;/*Change this*/ 
...... 
...... 
}