试图让孩子悬停与父母不同[重复]答案

【问题标题】：Trying to make child hover different to parent [duplicate]试图让孩子悬停与父母不同[重复]
【发布时间】：2020-03-25 16:41:54
【问题描述】：

我正在尝试创建一个 ul，当悬停时，不透明度会移动到 0.4，但是当悬停在 li 元素上时，该单个元素的不透明度会返回到 1。

这可能吗？注意我正在使用 Fomantic UI（语义 UI 分支）

    <div class="four wide column">
      <ul>
        <li><a class="item" href="">link 1</a></li>
        <li><a class="item" href="">link 2</a></li>
        <li><a class="item" href="">link 3</a></li>
      </ul>
    </div>


ul{
  list-style-type: none;
  padding-left: 0px;
  transition: 0.5s;
  &:hover{
    opacity: 0.4;
  }

}

li{
  padding-top: 5px;
  padding-bottom: 5px;
  transition: 0.5s;

  &:hover{
    opacity: 1;
  }
}

【问题讨论】：

不使用& 并编写在ul 和li 选择器之外悬停的规则使示例能够正常工作。
感谢您的留言，很遗憾这并没有解决问题 ul{ list-style-type: none;填充左：0px；显示：块；过渡：0.5s； } ul：悬停{不透明度：0.4； } li{ padding-top: 5px;底部填充：5px；过渡：0.5s； }李：悬停{不透明度：1； }
我使用您的代码在我的设备上上传了一段视频：streamable.com/28i5a。如您所见，当我将鼠标悬停在 li 元素上时，不透明度仍然存在。

标签： html css hover semantic-ui fomantic-ui

【解决方案1】：

我已经解决了这个问题，孩子需要包含在父指令中，如下所示

ul{
      list-style-type: none;
      padding-left: 0px;
      display: block;
      transition: 0.5s;
    }

          ul:hover **li a**{
        opacity: 0.4;
      }

    li{
      padding-top: 5px;
      padding-bottom: 5px;
      transition: 0.5s;




    a{
      font-family: montserrat;
      background-color: transparent;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      color: #fff;
      transition: 0.5s;
    }

      a:hover {
        opacity: 1!important;
      }

    }

【讨论】：