Question

I’m just learning jQuery, and I’m trying to write a little script. To sum up the basic HTML code:

<ul class="boxes">
<li id="box1">1</li>
<li id="box2">2</li>
<li id="box3">3</li>
</ul>

I’m then using jQuery to create a hover effect of the active element:

$(document).ready(function(){
$('#box2').hover(function(){
  // In
  $(this).text('IN')
}, function(){
  // Out
  $(this).text('OUT')
})

What I want to add is that all the other li elements that aren’t hovered, fade away. I’m wondering if there is an opposite to $(this) that targets all the non-hovered ‘li’ in the ‘ul’ class “boxes”.

Thanks to anyone that can help me! 🙂

Answer 1

The opposite of this could be .not(this):

$('.boxes li').not(this).fadeOut();

Also see this example.