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;
}
}
I've managed to fix this, the child needed to be included with the parent instruction as below