How do I run a function when I mouseout of all hover events in jQuery?

Question

I have 4 elements that have the same class name that all react when hovered over..

Is there any way to: - Run a function when I am no longer over any of the classes?

Here's what I have-

HTML:

<div class = "item">Hello</div>
<div class = "item">Hi</div>
<div class = "item">Ok</div>
<div class = "item">Wahoo</div>

jQuery:

$('.item').hover(function(e) { 
 $(this).addClass('hover');
 $('.item:not(.hover)').each(function(index) {
  $(this).fadeTo('400', 0.5);
 });
 $('.hover').fadeTo('400', 1);

}, function(e) { 
 $(this).removeClass('hover');
 $('.item').fadeTo('400', .5);
});

Essentially I'm trying to mimic the functionality of: http://labs.dragoninteractive.com/

Answer 1

This should do the trick.

$('.item').hover(function(e) {
        $('.item').stop().each(function(index) {
                $(this).stop().fadeTo('400', 0.5);
        });
        $(this).stop().fadeTo('400', 1);

}, function(e) {        
        $('.item').stop().fadeTo('400', 1);
});