CODEWITHSUNDEEP
jquerygoogle-chrome
Damian Dennis
Damian Dennis

Reputation: 728

Chrome Bug Select/Display

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;
}

Upvotes: 3

Views: 348

Answers (4)

KTT
KTT

Reputation: 1

When you click the select lost the parent element the hover and select goes in active mode

.widget select{
    display:none;
}
.widget:hover select,
.widget select:active{
    display:block;
}

Fiddle

Upvotes: 0

nietonfir
nietonfir

Reputation: 4881

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).

Upvotes: 4

bfavaretto
bfavaretto

Reputation: 71918

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.

Upvotes: 5

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

The problem is that, while you have your mouse over the options, you are no longer hovering over the element. The options menu is a completely separate thing from the document, and it is not processed in the same way. This means that by activating the options list, you are mousing out of the element, causing it to be hidden.

There's no real way around this, so I would suggest making a "click to show/hide" control instead of relying on mouseover. It'll be more friendly to touch screens that way too.

Upvotes: -3

Related Questions