Css AngularJS悬停效果，可通过动态颜色代码更改背景颜色

我希望在div上具有悬停效果，以便根据传递给的颜色代码更改颜色。我的想法是将颜色代码传递给指令，然后调用

element.css（）

。但是，我还需要使用

element.addClass（hoverclass）

将hover类添加到特定的div中。现在，我被卡住了，因为我不知道如何处理这个问题

HTML

我的css：

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

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

---

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

经过一段时间的研究后，我通过使用彩色代码进行指令绑定，使其工作起来。 角JS指令：

angular.module('myApp', [])
 .directive('changeBackground', ['$animate', function ($animate) {
    return {
      restrict: 'EA',
      scope: {
          colorcode: '@?'
      },
      link: function ($scope, element, attr) {
          element.on('mouseenter', function () {
              element.addClass('change-color');
              element.css('background-color', $scope.colorcode);
          });
          element.on('mouseleave', function () {
              element.removeClass('change-color');
              element.css('background-color', '#fff');
          });
      }
    };
}]);

在HTML文件中，如下所示：

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

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

{{social.name}

我做了一个JSFIDDLE

作为一个更新来回答，如果您想在本地使用change color而不创建指令，那么您可以在模板中执行，而不必在控制器或指令中编写传统代码

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

{{social.name}

---

这里是JSFIDLE

我采用了一种稍微不同的方法。它基于为每个元素动态附加规则的思想

myApp.directive("hoverColor", hoverColor);

function hoverColor(){
    function link(scope, element, attrs){
        //create dynamic css class name using angular's $id
        var dynamicClass = "hover-color-"+scope.$id,
        rules = [
        "color: #fff;",
        "background-color:  "+attrs.hoverColor+";",
        "cursor: pointer;"
        ].join(""),
        selector = [
        "."+dynamicClass+":hover",
        "."+dynamicClass+":focus",
        "."+dynamicClass+":active"
        ].join(", ");

        addCSSRule(selector, rules);

        element.addClass("hover-color " + dynamicClass);
    }

    //some browsers support addRule other insertRule so we need wrapping function
    function addCSSRule(selector, rules) {
          if("insertRule" in hoverColor.sheet) {
                hoverColor.sheet.insertRule(selector + "{" + rules + "}", 0);
          } else if("addRule" in sheet) {
                hoverColor.sheet.addRule(selector, rules, 0);
          }
    }

    //create new stylesheet and save reference to it
    hoverColor.sheet = (function() { 
         var style = document.createElement("style");
         // WebKit hack :(
         style.appendChild(document.createTextNode(""));
         document.head.appendChild(style);
         return style.sheet;
    })();

    //add base rule, you could also add it to css stylesheet
    addCSSRule(".hover-color", "transition: 0.4s all;");

    return {
        restrict: 'A',
        link: link
    }

}

然后你可以这样使用它：

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

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

{{social.name}

---

在铬和FF上测试

很有趣，很好。这个很好用。这应该是正确的答案。谢谢

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