Question

当从<select>选择某些内容时，如果悬停时存在不同的样式，则会将重置悬停<option>置于初始状态。我怎样才能克服这个问题，因为如果存在transition属性会让它变得更糟？

修改

~~FF23，IE10，O12.5似乎没有这个问题~~
Safari和谷歌浏览器显然有这个问题。

要了解我在说什么，请按以下步骤操作：

选择最后一个选项
点击选择框
慢慢地将鼠标移到选项上，现在您可以看到选项是如何出现故障

CSS：

select {
    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;
}

HTML：

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

这似乎与Chrome相关的错误

问题287193
相关问题289326

Answer 1

我希望，我不会误解你的问题。

试试这个Jsfiddle

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

我放入select outline:0

Answer 2

不要以为你可以对它做任何事情......看起来像放松时围绕控制渲染的问题。

如果你坚持这种行为，你可以提出疑问。欺骗它 - 你可以在div中包装SELECT并简化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>

式：

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

注意：你必须玩填充

如果</option> </select>已应用悬停样式，则<select> <option>元素悬停毛刺

2 个答案: