JQuery/[removed] IE hover doesn't cover select box options?

Question

I have this bit of script to widen a text box on mouseover and shorten it on mouseoff.

The problem I am having is that Internet Explorer doesn\'t seem to extend it\'

Answer 1

Looks like this post has been up for a while, but hopefully there are still folks interested in a workaround. I experienced this issue while building out a new site that I'm working on. On it is a product slider, and for each product, mousing over the product pops up a large informational bubble with info about the product, a dropdown to select buy options, and a buy button. I quickly discovered that anytime my mouse left the initial visible area of the select menu (i.e., trying to select an option), the entire bubble would disappear.

The answer (thank you, smart folks that developed jQuery), was all about event bubbling. I knew that the most straightforward way to fix the issue had to be temporarily "disabling" the out state of the hover. Fortunately, jQuery has functionality built in to deal with event bubbling (they call it propagation).

Basically, with only about a line or so of new code, I attached a method to the "onmouseleave" event of the dropdown (mousing over one of the options in the select list seems to trigger this event reliably - I tried a few other events, but this one seemed to be pretty solid) which turned off event propagation (i.e., parent elements were not allowed to hear about the "onmouseleave" event from the dropdown).

That was it! Solution was much more elegant that I expected it to be. Then, when the mouse leaves the bubble, the out state of the hover triggers normally and the site goes on about its business. Here's the fix (I put it in the document.ready):

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});