3

私は完全に把握できない理由を非常に奇妙な問題を観察しました。CSSしたがって、jQueryで背景色を変更するとボタンのデフォルトが失われるということについて、皆さんに説明をお願いしたいと思いますか?

これはjsfiddle で実証されていますFF(および でテスト済みChrome)。ボタンの上にマウスを置くと、そのスタイルが失われます。たとえば、丸みを帯びた境界線がなくなりますが、これは予想されることではありません。なぜそのようなことが起こっているのか説明していただけますか？また、デフォルトの「CSS」設定を維持するためにどのような回避策を提案しますか?

4

3 に答える 3

1

最初にcssでボタンの背景色を設定した場合は、アニメーション化してjQueryでその色に戻します。

http://jsfiddle.net/899Wn/8/

button {
    background: blue;
}


$("#nav ul li button").hover(function() {
    $(this).stop().animate({
        backgroundColor: '#E5E5E5'
    }, 500);
}, function() {
    $(this).stop().animate({
        backgroundColor: 'blue'
    }, 500);
})
于 2013-02-08T14:29:11.443 に答える
1

すぐにフォーム要素のスタイル設定を開始します。< button href="#" > タグ、特に background-color または borders を使用すると、ブラウザーは要素を再レンダリングします。次に、特定の.cssが表示され、「ブラウザ+ソフトウェア+ OS」固有のスタイリングが失われます。

スタイリング フォーム コントロールの紹介 と スタイリング フォーム コントロールの詳細

于 2013-02-08T14:30:45.573 に答える
1

ページのデフォルトのボタンは、システムが生成したボタン (つまり、Windows) だと思います。視覚に影響を与えるスタイルを変更すると、ブラウザーがボタンをレンダリングし、特定のスタイルが削除されます。ここに来たら、もう帰り道です。最善の方法は、ボタンを上に上げて非常によく似たスタイルにすることです。そうすれば、残りのスタイルを失うことなく個々のスタイルを変更できます. ここでの同様の回答: Chrome default button style。この件についてさらに情報が得られるかどうか見てみます。

編集：

このページの2番目の回答は私の考えを裏付けているようですが、まだ参照はありません: https://stackoverflow.com/a/10265336/719718

于 2013-02-08T14:34:48.277 に答える