Question

当我将鼠标放在li元素上时，我希望更改ul中其他li的不透明度。这可能只是用CSS（我正在使用SASS）？如果我不是李，那么所有的都是不透明的：1。

<ul>
    <li></li>  //opacity 0.5
    <li></li>  //opacity 0.5
    <li></li>  <= hover on this li //opacity 1
    <li></li>  //opacity 0.5
    <li></li>  //opacity 0.5
    <li></li>  //opacity 0.5
</ul>

Answer 1

/* The opacity when hovered. */
ul li {opacity: 1}

/* The opacity when the li is not hovered */
ul li:not(:hover) {opacity:0.5}

Answer 2

诀窍是将所有项目的不透明度更改为ul:hover上的0.5和li:hover上的不透明度1。后者更具体，因此它适用于更普遍的一个。

＆＃13;

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

＆＃13;

<ul>
    <li> opacity 0.5 </li>
    <li> opacity 0.5 </li>
    <li> hover on this li //opacity 1 </li>
    <li> opacity 0.5 </li>
    <li> opacity 0.5 </li>
    <li> opacity 0.5 </li>
</ul>

＆＃13;

Answer 3

这个简单的技巧应该这样做：

＆＃13;

ul:hover > li{
  opacity: .5;
}

ul:hover > li:hover{
  opacity: 1;
}

＆＃13;

<ul>
    <li>1111</li> 
    <li>2222</li> 
    <li>3333</li> 
    <li>4444</li> 
    <li>5555</li> 
</ul>

＆＃13;

Answer 4

当您使用sass时，您可以使用在创建生成的CSS时将被解释的特定语法

ul 
{
&:hover
    {         
    li  {
        opacity: 1;             
        }
    }
li 
    {
    &:hover
        {
        opacity:0.5;
        }
     }
  }

一旦生成将成为

 ul:hover li {opacity: 0.5;}
 ul li:hover {opacity: 1;}

在CSS中选择其他li

4 个答案: