我正在尝试创建一个ul,将其悬停时,不透明度会移至0.4,但是当悬停在li元素上时,单个元素的不透明度会返回1。
这可能吗?抬起头,我正在使用Fomantic UI(语义UI分支)
<div class="four wide column">
<ul>
<li><a class="item" href="">link 1</a></li>
<li><a class="item" href="">link 2</a></li>
<li><a class="item" href="">link 3</a></li>
</ul>
</div>
ul{
list-style-type: none;
padding-left: 0px;
transition: 0.5s;
&:hover{
opacity: 0.4;
}
}
li{
padding-top: 5px;
padding-bottom: 5px;
transition: 0.5s;
&:hover{
opacity: 1;
}
}
答案 0 :(得分:0)
我已经设法解决了这个问题,孩子需要包含在父说明中,如下所示
ul{
list-style-type: none;
padding-left: 0px;
display: block;
transition: 0.5s;
}
ul:hover **li a**{
opacity: 0.4;
}
li{
padding-top: 5px;
padding-bottom: 5px;
transition: 0.5s;
a{
font-family: montserrat;
background-color: transparent;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: #fff;
transition: 0.5s;
}
a:hover {
opacity: 1!important;
}
}