Select CSS 中的其他里

Question

当我将鼠标放在一个 li 元素上时，我想改变 ul 中其他 li 的不透明度。仅使用 CSS 就可以吗（我正在使用 SASS）？如果我不在里，所有里都是opacity: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。后者更具体，因此它适用于更一般的。

ul:hover li {
  opacity: 0.5;
}

ul li:hover {
  opacity: 1;
}

<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>

Answer 3

这个简单的技巧应该可以做到：

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

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

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

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;}

Select CSS 中的其他里

Select other li in CSS

html

css

css-selectors