javascript - 如何在 CSS 中使悬停动态化？

Question

我使用的是 Angular v1.5.4。 该元素是一个个人博客。 目前处于早期原型(prototype)制作阶段。

这是我的用例:用户将鼠标悬停在按钮上。如果该按钮应用了“事件”类(ng-class 将该按钮设置为事件状态，或者如果 Controller 中的 JSON 中的属性“clicked”为真)，则将悬停颜色设置为漂亮的蓝色。如果该按钮当前未激活，则将按钮设为黑色(现在的颜色)。

我现在的代码:

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);

如何根据按钮的状态使 li:hover CSS 代码动态化？

Answer 1

只需更改您的 CSS 以关心类是什么...

改变

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

到

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