Parent element loses hover on select of a dropdown

Question

I get a strange behavior by Google Chrome 33 (Ubuntu).

I have a div element, which gets resized and repositioned on hover. Underlying there is a <select> element. When I try to select an option the :hover state of the parent div is lost.

I can't reproduce this in Firefox or Opera.

jsFiddle

Answer 1

This seems to be a known Chromium issue: https://code.google.com/p/chromium/issues/detail?id=78994

My workaround requires a hover CSS class + Javascript, as CSS parent selectors aren't a thing:

$('select').on('focus', function() {
    $(this).parent().addClass('hovered');
}).on('blur', function() {
    $(this).parent().removeClass('hovered');
});