父元素在选择下拉列表时丢失悬停

Question

Google Chrome 33（Ubuntu）发现了一个奇怪的行为。

我有一个div元素，它会在悬停时调整大小并重新定位。底层有一个<select>元素。当我尝试选择一个选项时，父div的:hover状态将丢失。

我无法在Firefox或Opera中重现这一点。

jsFiddle

Answer 1

这似乎是一个已知的Chromium问题：https://code.google.com/p/chromium/issues/detail?id=78994

My workaround需要一个悬停的CSS类+ Javascript，因为CSS父选择器不是一件事：

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