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. 父级需要将完全不透明度设置为 .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; }

我从您的示例中省略了过渡/转换，但我想您已经明白了。

JSFiddle .