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

Reply via email to