父元素在选择下拉列表时失去悬停 [英] Parent element loses hover on select of a dropdown

问题描述

我通过Google Chrome 33（Ubuntu）获得了一个奇怪的行为。

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

我无法在Firefox或Opera中重现此功能。

我的解决方法需要将悬停CSS类+ Javascript作为CSS父级选择器（）'

  $（'select'）。on（'focus'，function（）{$ b $ （''blur'，function（）{
 $（this）.parent（）。removeClass（'徘徊'）; 
}）; 
  

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

解决方案

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

这篇关于父元素在选择下拉列表时失去悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！