I need to highlight and work with the innermost of several hovered items. My markup is for now nested lists, although that may change, and if the user hovers over one several layers deep, only that one should be highlighted. I have code that is working for my initial case, with a demo here:
http://jsbin.com/ipova (code: http://jsbin.com/ipova/edit) My full interface will have something substantially more than the CSS generated id on the left, but I think this gets the point across. I would probably also add in hoverIntent to stop some annoying flashing... I'm reasonably happy with this code, although if I were to want to distribute it as a real plug-in, it would still take some work, as I reuse events in an inappropriate manner. But I want to know if there are better tools already out there to do the same thing. Has anyone created or seen something better than my implementation (and maybe found a better name for it!?) This is the relevant code for a method that can be used in place of hover: $.fn.hoverOne = function(fnOver, fnOut) { var currentElt = false; var $jqObject = this; $(this).hover(function(event) { if (currentElt) fnOut.call(currentElt, event); fnOver.call(this, event); currentElt = this; }, function(event) { fnOut.call(this, event); if ($.inArray(event.relatedTarget, $jqObject) > -1) { fnOver.call(event.relatedTarget, event); currentElt = event.relatedTarget; } else { currentElt = false; } }); } Any suggestions, pointers? Thanks, -- Scott Sauyet