Current class - mouseenter jQuery Animation

[nighthawk]

My brain just stuck its 4:40 AM and I don't know what to do.Either I don't have solution in my head or I should sleep.However I don't know how to animate only currently selected/hovered class and not all of them.Here's the HTML part:\[code\] <div class="cardWrap"> <div class="backlit"></div> <div class="cardStyle"> <div class="cardOverlay"></div> <ul class="cardAmount"> <li>Role Gift</li> <li>Download and Play <br> Your Favourite Games</li> <li>$10</li> <li> </li> </ul> </div> <a class="cardSelect">Get this amount</a> </div>\[/code\]Here's the jQuery part:\[code\]<script> $(function() { $('.cardWrap').on('mouseenter mouseleave', function(e) { if(e.type === 'mouseenter') { $('.backlit').stop().animate({'opacity': '.9'}) } else { $('.backlit').stop().animate({'opacity': '.4'}) } }); });</script>\[/code\]It works pretty fine... It reduces and increase opacity on hover of the parent. However, why it animates all of them if I have for example 3x same html structure and not only currently hovered one ?