Html <；选择>&书信电报；选项>；元素悬停故障，如果<；选择>；是否应用了悬停样式

当从

中选择某个内容时，如果悬停的样式不同，则会将悬停的

重置为初始状态。我怎样才能克服这个问题，因为如果存在

转换

属性，它会使情况变得更糟

编辑：

• FF23、IE10、O12.5似乎没有这个问题
• Safari和Google Chrome显然有这个问题

要了解我在说什么，请执行以下步骤：

选择最后一个选项

点击选择框

慢慢地将鼠标移到选项上，现在您可以看到选项是如何闪烁的

例如：

CSS:

HTML:

<select>
    <option value="mankind">Man kind</option>
    <option value="humankind">Human kind</option>
    <option value="animalkind">Animal kind</option>
</select>

人类
人类
动物种类

---

这似乎是与Chrome相关的bug

• 发行
• 相关问题

---

我希望我没有误解你的问题
试试这个

---

我将

选择
放入
大纲：0
我认为您对此无能为力..看起来像是在放松时围绕控件渲染的问题

如果你坚持这种行为，你就可以提出质疑。欺骗它——你能在div中选择并简化div吗

<div class="whizbangselect">
  <select>
    <option value="mankind">Man kind</option>
    <option value="humankind">Human kind</option>
    <option value="animalkind">Animal kind</option>
  </select>
</div>

注意：您必须使用填充物
来减少缺陷，但不会移除缺陷：（.+1以减少所造成的影响。@skmasq-试试这个-我改变
过渡：所有0.35秒都放松；
到
过渡：放松0.3s边框；
-我在上一个Chrome、FF和Safari上测试过..我没有看到任何奇怪的东西…你可以看到慢慢向下移动鼠标时，它在选项之间出现小故障。-你可以在这里，在鼠标浏览器st上看到ill重置该值。从积极的一面看，它在框中时根本不会出现故障。很好的破解。Looks for webkit不会将鼠标悬停在下拉菜单面板上，而FF会将鼠标悬停在下拉菜单面板上——一旦你将鼠标移出面板，直到你将鼠标悬停在实际的下拉菜单控件上。可能就是这样。看起来很有趣这不是一个问题，但我认为这是很明显的。
select {
    outline: 0; 
    padding: 5px;
    border: 1px solid blue;
    -moz-transition: all 0.35s ease-out;
    -o-transition: all 0.35s ease-out;
    -webkit-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
}
select:hover {
    border: 1px solid red;
}

<div class="whizbangselect">
  <select>
    <option value="mankind">Man kind</option>
    <option value="humankind">Human kind</option>
    <option value="animalkind">Animal kind</option>
  </select>
</div>

select {
    border: none;
}
div.whizbangselect {
    display: inline-block;
    border: 1px solid blue;

    -moz-transition: border 1s ease-out;
    -o-transition: border 1s ease-out;
    -webkit-transition: border 1s ease-out;
    transition: border 1s ease-out;
}
div.whizbangselect:hover { border: 1px solid red; }