JSを使用してCSSを書き込むと、キャンセルされます。スタイルシートで定義されているホバープロパティ

Question

2つのdivがあります。一方は他方の親です。親の上にマウスを置くと、子供は異なる背景色とフォント色を取得します。しかし、子要素のインラインスタイルを変更する関数switch（）を実行すると、ホバープロパティは取り消されます。言い換えれば、JSでCSSを適用した後、子の背景はホバリングで変化しません。ホバープロパティ：

document.querySelector('button').onclick = function() { 
 
    document.querySelector('.foo').style.backgroundColor = 'green'; 
 
}

.container { 
 
    background-color: lightgrey; 
 
    margin: auto; 
 
    width: 200px; 
 
    display: flex; 
 
    align-items: center; 
 
    height: 50px; 
 
} 
 
.foo { 
 
    width: 100px; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
.container:hover > .foo { 
 
    background-color: #c01919; 
 
    color: yellow; 
 
}

<div class="container"> 
 
    <div class="foo">Hey there!</div> 
 
</div> 
 

 
<button>.foo(backgroundColor) -> green</button>

本当の問題は、CSSをキャンセルからインラインスタイルを防ぐ方法ですか？

の後に背景色を赤色にする方法はありますかこの機能はインラインスタイルに影響していますか？

Answer 1

本物の質問は、インラインスタイルがCSSを取り消すのを防ぐ方法です：ホバープロパティ？

!important（これはひどいので、そうではありません）を使用しないと、できません。インラインスタイルのポイントは、どのセレクターよりも具体的であるということです。

インラインスタイルを使用しないでください。スタイルシートで緑の色を設定し、JavaScriptを使用して要素が属するクラスを変更することで、スタイルシートをアクティブにします。 !importantがルールの定義に使用されない限り、

document.querySelector('button').onclick = function() { 
 
    document.querySelector('.foo').classList.add('bar'); 
 
}

.container { 
 
    background-color: lightgrey; 
 
    margin: auto; 
 
    width: 200px; 
 
    display: flex; 
 
    align-items: center; 
 
    height: 50px; 
 
} 
 
.foo { 
 
    width: 100px; 
 
    margin: auto; 
 
    text-align: center; 
 
} 
 
.bar { 
 
    background-color: green; 
 
} 
 
.container:hover > .foo { 
 
    background-color: #c01919; 
 
    color: yellow; 
 
}

<div class="container"> 
 
    <div class="foo">Hey there!</div> 
 
</div> 
 

 
<button>.foo(backgroundColor) -> green</button>

Answer 2

インラインスタイルは、スタイルシートや<style>タグで定義されたスタイルよりも高い権限を持っています。あなたのユースケースは、ボタンをインラインスタイルで緑色にする代わりに、クラス（おそらくis-clicked）を追加する方が良いでしょう。次に、醜いインラインスタイルを防止し、セマンティッククラスに名前を付け、CSSでそのスタイルを上書きするのに問題はありません。

document.querySelector('.foo').classList.add('is-clicked'); 

注：（非常に）古いブラウザではclassListはサポートされていません。ターゲットオーディエンスに応じて、私はそれを使用することがOKであると言うでしょう：http://caniuse.com/#search=classlist