如何使懸停在CSS動態？

我正在使用Angular v1.5.4。該項目是個人博客。目前處於早期原型設計階段。如何使懸停在CSS動態？

這是我的用例：用戶懸停在按鈕上。如果該按鈕具有「活動」類（ng-class將該按鈕設置爲活動狀態，或者如果在控制器的JSON中「單擊」屬性爲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的動態懸停CSS代碼按鈕的狀態？

來源

2016-10-03 vincecampanale

簡單地改變你的CSS關心類是什麼？

變化

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

到

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

來源

2016-10-03 03:16:00 Cine

如何使懸停在CSS動態？

回答

相關問題