0

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;
  }
}
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
agtfrust
  • 3
  • 1
  • Not using the `&` and writing the rules for hovering outside of the `ul` and `li` selectors makes the example to work properly. – Pine Code Mar 25 '20 at 17:02
  • Thanks for your message, unfortunately that has not solved the problem ul{ list-style-type: none; padding-left: 0px; display: block; transition: 0.5s; } ul:hover{ opacity: 0.4; } li{ padding-top: 5px; padding-bottom: 5px; transition: 0.5s; } li:hover{ opacity: 1; } – agtfrust Mar 25 '20 at 17:42
  • I uploaded a video of the situation on my device using your code: https://streamable.com/28i5a. As you can see, when I hover on an `li` element, the opacity persist. – Pine Code Mar 25 '20 at 17:50

1 Answers1

0

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

    }
agtfrust
  • 3
  • 1