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
No comments:
Post a Comment