css - 在CSS中淡化未聚焦的对象

我想知道是否可以选择三个项目，当它们都没有悬停时，所有项目的不透明度为1，而当另两个项目不透明度为一半时，又变成了一半？我将鼠标悬停在一个上。

不幸的是，这是我到目前为止尝试的结果，因为我悬停在上面的对象的不透明度仍然为0.5。

 #mainLinks:hover { opacity: .5; }
 #mainLinks a{
      margin: 10px -10px 10px -10px;
      -webkit-transition: -webkit-transform .1s;
 }
 #mainLinks a:hover{
      -webkit-transform: scale(1.1);
      opacity: 1.5;
 }

任何和所有帮助表示赞赏！请问我是否需要更多信息或澄清！

谢谢，
欧文

最佳答案

你快到了


父级需要将完全不透明度设置为.5
悬停的项目将需要将不透明度设置为1


HTML示例：

<ol id="items">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ol>​

CSS：

#items:hover > li { opacity: .5; }
#items:hover > li:hover { opacity: 1; }

``我从您的示例中省略了转换/变换，但我认为您已经明白了。

JSFiddle。

关于css - 在CSS中淡化未聚焦的对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13620495/