使用动态颜色代码更改背景颜色的角度悬停效果

Question

我希望在div上有悬停效果,根据我传递给的颜色代码更改颜色.我的想法是将颜色代码传递给指令然后调用element.css().但是,我还需要使用悬停类添加到特定的div element.addClass(hoverclass).现在,我卡住了,因为我不知道如何处理这个问题.

HTML

<div ng-repeat="social in socialArray">{{social.name}}</div>

这会给我一些像:

<div>Facebook</div>
<div>Flickr</div>
<div>Google+</div>
<div>Instagram</div>
<div>Linkedin</div>

我的JS档案:

$scope.socialArray = [
     {name:"Facebook", color:"#3B5998"}, 
     {name:"Flickr",color:"#FE0883"}, 
     {name:"Google+",color:"#C63D2D"}, 
     {name:"Instragram",color:"#4E433C"},    
     {name:"Linkedin",color:"#4875B4"}
];

我的css:

.change-color{
  transition: 0.4s all;
}

.change-color:hover, .change-color:focus, .change-color:active{
  color: #fff;
  background-color:  #e38d13;
  cursor: pointer;
}

我希望能够根据socailArray中的颜色动态更改背景颜色.任何建议或提示都会很棒.先谢谢你!

Answer 1

作为对@Shaohao Lin的更新回答,如果要在不创建指令的情况下在本地使用更改颜色,则可以在模板中执行此操作,而无需在控制器或指令中编写附加代码.

<div 
            class="social-container change-color" 
            ng-repeat="social in socialArray" 
            ng-mouseover="hoverActive=true"
            ng-mouseleave="hoverActive=false"
            ng-style="hoverActive ? {'background-color':social.color} : {}">{{social.name}}</div>

这里是JsFiddle http://jsfiddle.net/zmskrf6y/1/