2

当从悬停时选择<select>不同样式时，它会使重置悬停<option>到初始状态。我该如何克服这一点，因为如果存在transition属性，它会使情况变得更糟？

编辑：

  • FF23,IE10,O12.5好像没有这个问题
  • Safari 和 Google Chrome 显然有这个问题。

要查看我在说什么，请按照以下步骤操作：

  1. 选择最后一个选项
  2. 点击选择框
  3. 慢慢将鼠标向下移动到选项上，现在您可以看到选项是如何出现故障的

示例：jsFiddle

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 相关的错误

4

2 回答 2

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

于 2013-09-07T23:40:18.867 回答
1

不要认为你可以做任何事情..看起来像缓动时围绕控制渲染的问题。

如果你坚持这种行为，你可以试探。欺骗它——你能在 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; }

注意：您必须使用填充

于 2013-09-08T00:01:28.397 回答