2

ホバー効果のあるボタンがあります（色が変わります）。

button {
    width: 180px;
    height: 80px;
    background-color: #A0522D;  
}

button:hover {
    background-color: #CD853F;
}

次に、選択したボタンが正しい場合など、jsから背景色を変更したいと思います。それが私が思いついたものです：

buttons[i].style.backgroundColor = "#A0522D";

アニメーションのトランジション プロパティもあります。

button {
    transition: background 0.5s ease, color 0.2s ease;
}

初めて背景色を変更すると、ホバーアニメーションが完全に削除されるようです。ただし、背景色ではなくフォントの色を変更する場合はそうではありません。

ホバー アニメーションと js アニメーションの両方で bgcolor を同時に変更する方法を知っていますか? または、ボタンをアニメーション化するための私のアプローチが正しくない可能性がありますか?

4

3 に答える 3

3

これは、CSS ルールの特異性に関係しています。要素に設定されたルール (styleたとえば、プロパティを設定することによって) は、CSS ファイル/スタイル ブロックで宣言したルールよりも具体性が高くなります (を使用しない限り!important)。

より良いアプローチは、スタイルを直接設定する代わりに、クラスを使用して background プロパティを設定し、要素のそれらを変更することです。

buttons[i].className = "myClass";

このStackOverflow の回答には、JavaScript で CSS クラスを設定する方法が詳しく説明されています。CSS の詳細については、この記事を参照してください。

于 2013-08-06T15:01:02.613 に答える
0

jquery を使用して css を変更できますか? ホバーと jquery カラー ライブラリの使用https://github.com/jquery/jquery-color

$('node').animate({ backgroundColor: "#f6f6f6" }, 'fast');
于 2013-08-06T15:02:07.210 に答える