web-dev-qa-db-ja.com

入力type = buttonの背景色：ホバー状態が続くIE

背景色が設定された入力type = buttonと：hoverの別のボタンがあります- http://jsfiddle.net/hc2Eu/3/ を参照してください

In IE（すべてのバージョン）-ボタンの上でマウスを下ろし、ボタンを離してからマウスアップする-背景色は、もう一度マウスを置くまで：hover設定のままです。

これにはいくつかの回避策がありますか？できればjsではないのですか？ （IE6は不要）

cssinternet-explorerhoverbackground-color
8
ScottR

<input type="button">に修正があるかもしれません-しかし、もしあれば、私はそれを知りません。

それ以外の場合は、慎重にスタイル設定されたa要素に置き換えることをお勧めします。

例： http://jsfiddle.net/Uka5v/

.button {
    background-color: #E3E1B8; 
    padding: 2px 4px;
    font: 13px sans-serif;
    text-decoration: none;
    border: 1px solid #000;
    border-color: #aaa #444 #444 #aaa;
    color: #000
}

利点は、a要素が特別な作業なしでInternet Explorerの異なる（古い）バージョン間で一貫してスタイルを設定することです。リンクはそのボタンよりも見栄えが良いと思います:)

13
thirtydot

ボタンを見つけるためにtype属性セレクターを使用してみてください（おそらくこれも修正されます）。

input[type=button]
{
  background-color: #E3E1B8; 
}

input[type=button]:hover
{
  background-color: #46000D
}
7
Blender

画像が最初に来て、背景画像呼び出しの後にコンマを入れることを確認する必要があります。それは実際に動作します：

    background:url(Egg.png) no-repeat 70px 2px #82d4fe; /* Old browsers */
background:url(Egg.png) no-repeat 70px 2px, -moz-linear-gradient(top, #82d4fe 0%, #1db2ff 78%) ; /* FF3.6+ */
background:url(Egg.png) no-repeat 70px 2px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d4fe), color-stop(78%,#1db2ff)); /* Chrome,Safari4+ */
background:url(Egg.png) no-repeat 70px 2px, -webkit-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Chrome10+,Safari5.1+ */
background:url(Egg.png) no-repeat 70px 2px, -o-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Opera11.10+ */
background:url(Egg.png) no-repeat 70px 2px, -ms-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82d4fe', endColorstr='#1db2ff',GradientType=0 ); /* IE6-9 */
background:url(Egg.png) no-repeat 70px 2px, linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* W3C */
1
Jason Paul