Pure css to achieve fade in and out_html/css_WEB-ITnose

The purpose at that time was to use pure css to implement the function of B fading in when the mouse hovers over node A, and fading out when moving out of A. It is hoped that B will not occupy space and there will be no events when it is not displayed ( Usually implemented with display: none), so difficulties arise.

The following is the dom structure

Transition does not support changes in display attributes, and the browser will display changes in node attributes together with the display, resulting in invalid animation effects

#container{width: 100px;
height:100px;
background-color: red;
display:block;

}
#container #detail{
width:10px;
height:10px;
position:absolute;
background-color:#666;
top:15px;
left:15px;
opacity:0;
transition:all 0.4s ;
display: none;
}
#container:hover #detail,#detail:hover{
opacity:1;
display: block;
}

The fade-in is completed, but the fade-out does not work. This is because the detail node does not occupy space

#container{width:100px;
height:100px;
background-color: red;
display:block;

}
#container #detail{
width:10px;
height:10px;
position:absolute;
background-color:#666;
top:15px;
left:15px;
opacity:0;
-webkit-animation:hide 0.4s ease-out;
display: none;
}
#container:hover #detail,#detail:hover{
opacity:1;
display: block;
-webkit-animation:show 0.4s ease-in;
transition-delay: 0s;
}
@-webkit-keyframes show /* Safari and Chrome */
{
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes hide /* Safari and Chrome */
{
0% {opacity:1;}
100% {opacity:0;}
}

Final implementation code (only written under chrome)

#container{width:100px;
height:100px;
background-color: red;
display:block;

}
#detail{
width:10px;
height:0px;
position:absolute;
background-color:#666;
top:15px;
left:15px;
opacity:0;
-webkit-animation:hide 0.4s ease-out;
display: block;
transition:height 1ms;
transition-delay : 0.4s;
overflow:hidden;
}
#container:hover #detail{
height:10px;
opacity:1;
display: block;
- webkit-animation:show 0.4s ease-in;
transition-delay: 0s;
}
#detail:hover{
height:10px;
opacity:1;
display : block;
-webkit-animation:show 0.4s ease-in;
transition-delay: 0s;
}
@-webkit-keyframes show
{
0% { opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes hide
{
0% {opacity:1;}
100% { opacity:0;}
}