Trying to make child hover different to parent

33 views Asked by At

I'm trying to create an ul where when hovered, opacity moves to 0.4, however when hovering on the li element the opacity for that individual element returns to 1.

Is this possible? Heads up I'm using Fomantic UI (Semantic UI fork)

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

There are 1 answers

0
agtfrust On

I've managed to fix this, the child needed to be included with the parent instruction as below

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

    }