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

それについて何もできないとは思わないでください..イージング時のコントロールのレンダリングに関する問題のようです。

あなたがその行動に固執しているなら、あなたは疑うことができます。ごまかす - SELECT を 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>

スタイル：

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 に答える