Your generous donation allows me to continue developing and updating my code!
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!
The code
$(function(){ // Elements on which to bind the event. var elems = $('#test, #test div, #test .bind-me'); // Clear any previous highlights and text. $(document) .bind( 'mouseover', function(event){ elems .removeClass( 'event-outside' ) .children( '.event-target' ) .text( ' ' ); }) .trigger( 'mouseover' ); // Bind the 'mouseoveroutside' event to each test element. elems.bind( 'mouseoveroutside', function(event){ var elem = $(this), target = $(event.target), // Update the text to reference the event.target element. text = 'Mouse-over: ' + target[0].tagName.toLowerCase() + ( target.attr('id') ? '#' + target.attr('id') : target.attr('class') ? '.' + target.attr('class').replace( / /g, '.' ) : ' ' ); // Highlight this element and set its text. elem .addClass( 'event-outside' ) .children( '.event-target' ) .text( text ); }); });