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

Question

我想知道是否可以选择三个项目，当它们没有悬停时，所有这些项目的不透明度都为 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;
 }

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

谢谢，欧文

Answer 1

你快到了。

1. 父级需要将完全不透明度设置为 0.5
2. 悬停的项目需要不透明度设置为 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; }

我从你的例子中省略了转换/转换，但我假设你明白了。

JSF中。