如何使悬停在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动态？

回答

相关问题