1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html自动淡入淡出 纯css实现淡入淡出_html/css_WEB-ITnose

html自动淡入淡出 纯css实现淡入淡出_html/css_WEB-ITnose

时间:2021-11-12 05:34:32

相关推荐

html自动淡入淡出 纯css实现淡入淡出_html/css_WEB-ITnose

当时的目的是想用纯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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。