覆盖：将父对象悬停在子对象上

Question

我有这样的东西：

<div class="parent">
    <div>Normal item</div>
    <div class="special">Special item</div>
</div>

现在，当我将鼠标悬停在div.parent上时，我想将不透明度设置为50％，但是我不希望这影响特殊项目。

我尝试了以下操作：

.parent:hover {
    opacity: 50%;
}
.special {
    opacity: 100% !important
}

但是这不起作用，是否有办法选择.special儿童始终具有不透明度：100％？

编辑：我现在尝试了以下

.parent:hover {
    opacity: 50%;
}

.parent:hover .special {
    color: white;
    opacity: 100% !important;
}

[颜色变为白色，但不透明度不受影响。

Answer 1

将鼠标悬停在li上而不是整个.parent上时将ul元素作为目标>

.parent:hover > div {
    opacity: 50%;
}

.special {
    opacity: 100% !important
}

<div class='parent'>
  <div>Normal Item</div>
  <div class="special">Special item</div>
  <div>Normal Item</div>
</div>

您也可以使用.not()

.parent:hover > div:not(.special) {
    opacity: 50%;
}

<div class='parent'>
  <div>Normal Item</div>
  <div class="special">Special item</div>
  <div>Normal Item</div>
</div>

Answer 2

代替更改不透明度属性，您可以使用rgba更改颜色：