problem with onmouseout for my javascript custom select

Question

I've created a custom select using javascript as described here: http://v2.easy-designs.net/articles/replaceSelect/

The key idea is that the select is built of a containing two (in my case)

s. What I want to do is add an onmouseover function that should read something like:

ulNode.onmouseout = function() {
      if (ulNode.className.indexOf('selectOpen') !- -1){
         selectMe(li[0]);
      }
}

i.e. if the mouse leaves the ul, and the ul is open, the first element should be selected. This works fine, but this function gets called when I move my mouse between li's, even though I haven't left the containing ul. Any ideas why that might happen?

Thanks in advance!

Answer 1

mouseover and mouseout are wrong king of events for this case. They are fired way too often when you have other elements inside the element that has mouseout event. You need something like mouseleave and mouseenter

Mouseleave in jQuery

Answer 2

Try implementing some delay before the mouseout event like this:

var hover_to = null;
$("ul").mouseover(function() {
   window.clearTimeout(hover_to);
   // (A) your stuff...
}).mouseout(function() {
   hover_to = window.setTimeout(function() {
      // (B) your stuff...
   },200);
});

This hopefully handles the nonwanted atomic events. Careful with the scope in (B).