2

http://jsfiddle.net/msNhr/

When you go over "aaaaa" an overlay is display, when you try to select something from the select within the overlay closes. How do I get this right?

The overlay should only close if the actual overlay area is left.

Thanks!

steros
  • 1,794
  • 2
  • 26
  • 60

2 Answers2

7

see this fiddle: http://jsfiddle.net/msNhr/3/ (tried on Fx14 and Ch 21.0.1180.57)

I've just stopped the propagation of mouseleave event so it won't reach the overlay

relevant js

$(function() {
    $('#a').mouseenter(function() {
        $('#overlay').show();
    });
    $('#overlay').mouseleave(function() {
        $(this).hide();
    });
    $('#overlay select').mouseleave(function(ev) {
        ev.stopPropagation()
    });
});
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • This is a big improvement, maybe the best we can do. However, in the normal case where the overlay is just big enough for the elements it contains, if the user clicks a select option while the mouse is outside the overlay, the overlay stays open. It doesn't close until the user mouses back over and out of it again, because the mouse has already left it. You can see this in the fiddle by removing the height spec from .overlay. I don't have a better solution. If someone does, please speak up, it's a longstanding issue for me. – enigment Sep 29 '14 at 23:46
0

Possibly a duplicate of Select triggers MouseLeave event on parent element in Mozilla Firefox.

An alternative is to check if the relatedTarget on the event object is null on mouseleave.

See this fiddle: http://jsfiddle.net/kv0mndeg/1/

brennvo
  • 89
  • 1
  • 7