当时的目的是想用纯css实现一种鼠标hover A节点的时候B淡入,移出A的时候B淡出的功能,希望B在不显示的时候不会占位且无事件(通常用display:none实现),于是就出现了困难。
以下是dom结构
transition不支持display属性的改变,而浏览器会将节点属性的变化同display一起显示,从而导致动画效果的失效
#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;
}
淡入完成了,淡出却不行,这是因为detail节点不占位了
#conta