ホバーの背景を変更することはできません（ブートストラップナビバー内）？

Question

本当にBootstrapはルールをオーバーライドするルールを使ってわかりにくくなり、オーバーライドするのが難しいと思います（実際にはそれほど柔軟ではないので、独自のカスタムブートストラップCSSを作成したくはありません。ちょっとした変更は新しいバージョンを再構築する必要がありますLESSソースコードからのブートストラップ）。私がここに欲しい

は（ナビゲーションバーに）リンク上でホバリングするとき、私自身の色ではなく、醜いデフォルトカラーのブートストラップのセットにその背景を変更することだけで簡単です。だから私がリンク要素のIDを定義してもCSSルールはまったく動かない。

li#li#li#li#li#li#li#li:hover { 
 
    background-color:red!important; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="navbar" id="menu"> 
 
    <ul class="nav navbar-nav"> 
 
     <li id="li"><a href="#">Test</a></li> 
 
    </ul> 
 
    </div>

あなたもそのCSSルールで見ることができるように、それがオーバーライドすることはできませんか？または、実際にホバリング時に背景が変更された実際の要素が間違っています（実際にはli要素であるはずです）。

また、Bootstrapがその魔法をどのように起こせるかを誰かが私に説明できるかどうかは疑問だ。自分のCSSプラグインに同じ魔法を適用したいのですが、場合によっては役に立つかもしれません。 ありがとうございます。

Answer 1

それはあなたに感謝、はい、それはそれだその背景に

#li:hover a { 
 
    background-color:red; 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="navbar" id="menu"> 
 
    <ul class="nav navbar-nav"> 
 
     <li id="li"><a href="#">Test</a></li> 
 
    </ul> 
 
    </div>