With jQuery outside events you can bind to an event that will be triggered only when a specific "originating" event occurs outside the element in question. For example, you can click outside, double-click outside, mouse-over outside, focus outside (and over ten more default "outside" events).

You get the idea, right?

The mouseoveroutside event, bound to a few elements

Just mouse around, and see for yourself!

test Mouse-over: html
a Mouse-over: html
b Mouse-over: html
c Mouse-over: html d Mouse-over: html e Mouse-over: html
f Mouse-over: html
g Mouse-over: html h Mouse-over: html i Mouse-over: html

The code

view sourceprint?
01.$(function(){
02.   
03.  // Elements on which to bind the event.
04.  var elems = $('#test, #test div, #test .bind-me');
05.   
06.  // Clear any previous highlights and text.
07.  $(document)
08.    .bind( 'mouseover', function(event){
09.      elems
10.        .removeClass( 'event-outside' )
11.        .children( '.event-target' )
12.          .text( ' ' );
13.    })
14.    .trigger( 'mouseover' );
15.   
16.  // Bind the 'mouseoveroutside' event to each test element.
17.  elems.bind( 'mouseoveroutside', function(event){
18.    var elem = $(this),
19.      target = $(event.target),
20.       
21.      // Update the text to reference the event.target element.
22.      text = 'Mouse-over: ' + target[0].tagName.toLowerCase()
23.        + ( target.attr('id') ? '#' + target.attr('id')
24.          : target.attr('class') ? '.' + target.attr('class').replace( / /g, '.' )
25.          : ' ' );
26.     
27.    // Highlight this element and set its text.
28.    elem
29.      .addClass( 'event-outside' )
30.      .children( '.event-target' )
31.        .text( text );
32.  });
33.   
34.});