我正在尝试将li悬停在上面时进行过渡,但是悬停似乎被忽略并且什么也没有发生。如果我改用'nav ul:hover',它可以工作,但是所有li的下面都弹出条。
<nav>
<ul>
<li class="nav-li">All Departments</li>
<li class="nav-li">Shop by Room</li>
<li class="nav-li">DIY Projects & Ideas</li>
<li class="nav-li">Home Services</li>
<li class="nav-li">Speacials & Offers</li>
<li class="nav-li">Local Ad</li>
</ul>
</nav>
的CSS
.nav-li {
margin-right: 40px;
display: inline-block;
padding-bottom: 2em;
transition: all .5s ease;
cursor: pointer;
position: relative;
}
.nav-li::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width .5s ease;
}
.nav-li:hover .nav-li::after {
background-color: #f96302;
width: 100%;
}
该.nav-li:hover .nav-li::after
应.nav-li:hover::after
.nav-li {
margin-right: 40px;
display: inline-block;
padding-bottom: 2em;
transition: all .5s ease;
cursor: pointer;
position: relative;
}
.nav-li::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width .5s ease;
}
.nav-li:hover::after {
background-color: #f96302;
width: 100%;
}
<nav>
<ul>
<li class="nav-li">All Departments</li>
<li class="nav-li">Shop by Room</li>
<li class="nav-li">DIY Projects & Ideas</li>
<li class="nav-li">Home Services</li>
<li class="nav-li">Speacials & Offers</li>
<li class="nav-li">Local Ad</li>
</ul>
</nav>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句