父元素在选择下拉列表时失去悬停答案

【问题标题】：Parent element loses hover on select of a dropdown父元素在选择下拉列表时失去悬停
【发布时间】：2014-04-27 03:19:45
【问题描述】：

Google Chrome 33 (Ubuntu) 出现了一个奇怪的行为。

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

我无法在 Firefox 或 Opera 中重现此内容。

jsFiddle

【问题讨论】：

Chrome 版本 33.0.1750.154 m (Windows 7) 一切正常。猜猜它是特定于 Ubuntu 的。
Chrome 版本 33.0.1750.152 在 Mac 上运行正常。
奇怪，我无法重现它，因为我这里没有 Ubuntu 虚拟机。但只是一个盲目的猜测，尝试附加 :focus 选择器：jsfiddle.net/QHhmV/2 会很有趣知道这是否会有所不同
感谢您的回复，奇怪的是这是 Ubuntu 特有的！ @NicoO 不幸的是，:focus 状态不会影响它。
@DanLee 试试这个：fiddle。我添加了 onchange 事件来获得焦点。

标签： css google-chrome select hover

【解决方案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');
});

【讨论】：

谢谢，这么多年你的回答对我还是有帮助的！
@TimGerhard 很高兴听到 :)