DIVの背景色は、あらかじめ設定しておくとホバリング時に変更されません。

Question

DIVのbackground-colorは、その上にカーソルを置くと変更されます。 DIVのstyleプロパティにbackground-colorを設定していない場合、私はそれを働かせることができますが、これがなぜホバーカラーが適用されなくなるのを理解できないのですか？

<style> 
.hovery { 
    cursor: pointer; 
    display: block; 
    float: left; 
    margin-bottom: 4px; 
    margin-right: 10px; 
    border: 1px solid gray; 
    border-radius: 6px; 
} 
.hovery:hover { 
    background-color: black; 
} 
</style> 

私が作成したとき、私のDIV私は以下のコードを使用していると私は私が別の色に1「を選択」を設定できるように、作成時にbackground-colorプロパティを設定しています（PHPで）他のすべてのdiv要素より：

echo "<div class='hovery' style='background-color: " . ($onthis==$shrow['Name'] ? $_SESSION['branding_buttonColour'] : "#EEEEFF;"). " '>\r\n"; 

私は私場合はその後、ホバー色変化作品上記のコードでbackground-colorを設定するが、なぜbackground-colorhover色を防ぐために設定しないことを発見しました働いているから？彼らは2つの異なるものではありませんか？

Answer 1

これはという特殊性と呼ばれ、インラインスタイリングに力を入れています。それを避けたり、（クラス名を追加するホバーのような）JavaScriptのトリックを作ります。あなたもこれを作ることができます：

.hovery:hover { 
    background-color: black !important; 
} 

しかし、私はそんなに好きではありません。インラインスタイルが要件に必須である場合は、!importantを使用します。それ以外の場合は、インラインスタイルを削除します。

Answer 2

PHP内の要素にクラスを追加し、そのクラスのbackground-colorをCSSで制御することをお勧めします。

これは、コードをきれいに保ち、すべてのルールをオーバーライドするインラインスタイルの使用を避け、JavaScriptを使用してクラスを簡単に変更できるため、色を変更することができます。