覆盖：父项悬停在子项上

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
}

但这行不通，是否有某种方法可以 select .special 子项始终具有不透明度：100%？

编辑：我现在尝试了以下

.parent:hover {
    opacity: 50%;
}

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

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

Answer 1

将鼠标悬停在 .parent 上时定位子 div 元素，而不是整个 div

.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 更改颜色，而不是更改不透明度属性：

.parent:hover {
   color: rgba(0,0,0,.5);
}
.special {
    color: rgba(0,0,0,1);
}

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

Override :hover of parent on child