html - 试图让孩子悬停与父母不同

Question

我正在尝试创建一个 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;
  }
}

Answer 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;
      }

    }