如何使悬停在CSS动态

How to make hover dynamic in CSS?

本文关键字：CSS 动态 悬停 何使      更新时间：2023-09-26

我使用的是Angular v1.5.4。这个项目是个人博客。目前处于早期原型阶段。

这是我的用例:用户悬停在按钮上。如果该按钮应用了"active"类(ng-class将该按钮设置为active，或者如果属性"clicked"在控制器的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);

我如何使li:hover CSS代码动态基于按钮的状态?

只需改变你的CSS来关心类是什么…

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


.active:hover{
  background-color: #111;
}
相关文章：