1

インラインスタイルを持つこのボタンがあります。ユーザーが選択したためインラインであるため、残念ながらこれにクラスをリンクする方法はありません。

したがって、次の CSS インラインがあります。

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

だから私の質問は、どうすれば背景を単純に反転させたい場所にホバーカラーを適用できるかということです。ただし、事前に色がわからないため、ホバー時に実際に色を適用することはできません。しかし、単純に背景を反転すると、ホバー効果がシミュレートされます。

さらに、ボタンは可変サイズにすることができます。

これはできますか？

ここにフィドルがありますhttp://jsfiddle.net/hLrvA/

私はこれを試してみましたが、ちょっとうまくいきましたが、ボタンがいっぱいにならないので実際にはそうではありません. 

a:hover { background-position:0 -15px !important; }

これをどのようにやってのけることができるかについての洞察は大歓迎です。

4

2 に答える 2

0

:hover で background-color プロパティを変更しようとしたときに、似たようなことに遭遇しました

HTML

<div class="demo"></div>

CSS

.demo{
    width: 50px;
    height: 150px;
    background: #388cb6;
    background: -moz-linear-gradient(top, #41a2c5 0%, #388cb6 50%, #327cab 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#41a2c5), color-stop(50%,#388cb6), color-stop(100%,#327cab));
    background: -webkit-linear-gradient(top, #41a2c5 0%,#388cb6 50%,#327cab 100%);
    background: -o-linear-gradient(top, #41a2c5 0%,#388cb6 50%,#327cab 100%);
    background: -ms-linear-gradient(top, #41a2c5 0%,#388cb6 50%,#327cab 100%);
    background: linear-gradient(to bottom, #41a2c5 0%,#388cb6 50%,#327cab 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#41a2c5', endColorstr='#327cab',GradientType=0 );

}
.demo:hover{
    background-color: red;
}

上記は機能しませんが、より具体的な背景色ではなく背景を直接ターゲットにすると機能します。

.demo:hover{
    background: red;
}

ほとんどのブラウザーは、個々のプロパティではなく、単一のインライン バックグラウンド宣言を好むようです。

注: 疑似クラスを使用して、アンカー リンクに限定されないことを示しました。

于 2013-09-09T13:08:14.500 に答える