Chrome Bug Select/Display

Question

This only seems to happen on Chrome but basically if I have a hidden element with select box inside it and I have some javascript make it display when I mouseover the parent element. The problem is that the select box can no longer be selected. I have created a demo on jsfiddle.

HTML

<div class="widget-wrapper">
Test
<div class="widget">
    <select>
        <option>Test</option>
    </select>
</div>

JS

$('.widget-wrapper').mouseover(function(){
   $('.widget').show();
});
$('.widget-wrapper').mouseout(function(){
   $('.widget').hide();
});

CSS

.widget {
    display: none;
}

.widget.over {
    display: block;
}

Answer 1

I can't reproduce it on Chrome/OSX (I can select a value from the field), but I believe the problem is that it's hiding again when you hover the select, as that triggers a mouseout on the parent. Try mouseenter/mouseleave instead:

$('.widget-wrapper').mouseenter(function(){
    $('.widget').show();
});
$('.widget-wrapper').mouseleave(function(){
    $('.widget').hide();
});

http://jsfiddle.net/qmnRL/1/

---

Also, what @nietonfir mentioned in the comments above: this can be solved entirely with CSS.

Answer 2

I'd suggest to use a CSS-only solution:

.widget-wrapper .widget {
    display: none;
}
.widget-wrapper:hover .widget {
    display: block;
}

[edit] And the issues you have with your jQuery solution are described in the documention:

This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves over the Inner element in this example, a mouseover event will be sent to that, then trickle up to Outer. This can trigger our bound mouseover handler at inopportune times. See the discussion for .mouseenter() for a useful alternative.

In a nutshell: Use mouseenter() and mouseleave()(if you really need to).