css - 为什么这里的transition对overflow：hidden过渡到visible无效？

问题描述

问 题

HTML

<nav>
<ul class="ul1">
<li>
    <a href="">首页</a>
    <ul class="ul2">
        <li><a href="">新闻</a></li>
        <li><a href="">科技</a></li>
        <li><a href="">财经</a></li>
        <li><a href="">读书</a></li>
    </ul>
</li>
</ul>
</nav>

CSS

.ul1{transition: all 1s ease;}
ul{list-style: none;}
a{text-decoration: none;}
.ul1>li{

width: 200px;
height:2em;
background: rgba(30,50,200,0.7);
line-height: 2em;
list-style: none;
text-align: center;
overflow: hidden;}

.ul1>li:hover{

overflow: visible;}

.ul2{

background: rgba(30,50,200,0.4);}

.ul2>li:hover{

background: rgba(200,0,20,1);
width: 100%;
height: 2em;
line-height: 2em;
display: block;}

解决方案

就是说属性之中可以animation的，没有overflow，因此不能用伪类做overflow的过度

这篇关于css - 为什么这里的transition对overflow：hidden过渡到visible无效？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！