CSS3：ホバーにフェードインし、ホバーが消えたときにフェードアウトします

Question

私はdivを持っています。私がマウスを動かすと、fadeIn効果を​​使って表示され、マウスを削除すると、fadeOut効果を使うべきです。

私は以下のコードを試しました。

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

すべてのヘルプは素晴らしいことです。

ありがとうございます。

Answer 1

CSSトランジションが動作しませんdisplay:block/none;visibility/opacityプロパティを使用して効果を与えることができます。

実際に追加したい場合は、transition-delayプロパティを手動で追加できます。

.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

コード作業罰金displayを変更する際の移行が機能しないとしてだけで、blockにnoneから表示を変更。

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