CSS3：悬停时淡入淡出，淡出时消失

Question

我有一个div。当我悬停在它上面时，应该使用fadeIn效果出现，当我删除鼠标时，它应该使用fadeOut效果。

我已尝试过以下代码。

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何帮助都会很棒。

谢谢。

Answer 1

CSS转换不适用于display:block/none;您可以设法使用visibility/opacity属性来实现此效果。

选中此示例，如果您确实要添加transition-delay属性，可以手动添加。{/ p>

.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

代码工作正常，只需将显示从none更改为block，因为转换在更改display时不起作用。

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