CSSでホバーダイナミックを作成するには？

Question

私はAngular v1.5.4を使用しています。 プロジェクトは個人的なブログです。 初期の試作段階にあります。

ここは私の使用例です。ユーザーがボタンを置いています。そのボタンに 'アクティブ'クラスが適用されている場合（ng-classはそのボタンをアクティブに設定します。コントローラのJSONで 'clicked'プロパティがtrueの場合）、ホバーカラーを青色にします。そのボタンが現在アクティブでない場合は、ボタンを黒にします（現在の色です）。

私が今持っているコード：

HTML：

<div class="buttons" ng-controller="ButtonController as buttons"> 
    <ul> 

     <li ng-repeat = "button in buttons.buttonsList" 
      ng-class="{active: button.isClicked == true}" 
      ng-click="button.isClicked = !button.isClicked"> 

     <p>{{button.name}}</p> 

     </li> 

    </ul> 
    </div> 

CSS：

li { 
    float: left; 
} 

li p { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li:hover{ 
    background-color: #111; 
} 

.active { 
    background-color: #4CAF50; 
} 

ButtonController.js：

function ButtonController() { 
    this.buttonsList = [{ 
    name: 'Home', 
    description: 'This button returns the user to the home page.', 
    clicked: false 
    },{ 
    name: 'Music', 
    description: 'This button takes the user to a page where I write about music I like.', 
    clicked: false 
    }]; 
} 

angular 
    .module('app') 
    .controller('ButtonController', ButtonController); 

がどのように私は李を作るのです。 CSSコードを動的にホバーするボタンの状態？

Answer 1

だけ...クラスが何であるかを気にする

.active:hover{ 
    background-color: #111; 
} 

へ

変更

li:hover{ 
    background-color: #111; 
} 

をあなたのCSSを変更