JQuery/Javascript: 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's hover over the options of a select box.

This means in IE I can click the select, have the options drop down, but if I try to select one, they vanish and the select box re-sizes as soon as I move off the select box itself.

Example Code:

<script type='text/javascript'>
$(function() {
$('#TheSelect').hover(
    function(e){
        $('#TheText').val('OVER');
        $(this).width( 600 );
    },
    function(e){
        $('#TheText').val('OUT');
        $(this).width( 50 );
   }
);
});
</script>

And:

<input type='text' id='TheText' /><br /><br />

<select id='TheSelect' style='width:50px;'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='3'>Three</option>
    <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
    <option value='5'>Five</option>
    <option value='6'>Six</option>
    <option value='7'>Seven...</option>
</select>

Are there any workarounds for select boxes in IE? I would even consider a jquery replacement if anyone can recommend one that is really reliable.

Thanks!

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 (ie, 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 (ie, 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();
  });
});

Answer 2

Apparently IE doesn't consider the drop down bit part of the select element. It's doable, but it takes a bit of cheating with expando properties and blur/focus events to enable and disable the 'hide' effect to stop it kicking in when the mouse enters the drop-down part of the element.

Have a go with this:

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

(Apologies if this isn't how one is supposed to use jQuery - I've never used it before :))

Answer 3

I had a form that was hidden/shown based on hover. If the user focused on the select the form became hidden. I was able to solve my problem with something like this:

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});

Answer 4

WorldWideWeb's answer worked perfectly.

I had a slighty different problem, I had a hover effect on the containing item (hover to reveal a select menu) of the form field and on IE users couldn't pick from the drop down (it kept resetting the value). I added worldwideweb's suggestion (with the ID of the select) and viola, it worked.

HEre's what I did:

$(".containerClass").hover(function() {
    $(this).children("img").hide();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
    $(this).children('img').show();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });

});

Answer 5

Had the same problem, and WorldWidewebb's answer worked very well on IE8. I just made a slight change, removing "select" from the selector, since I included the select box's class in the selector. Made it a really simple fix.

Also, i had it implemented on a menu that uses the hoverIntent jquery plugin, with no problems. (No interference).