Question

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

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/

Answer 2

经过一段时间的研究，我通过使用colorcode进行指令绑定来实现它。 Angular 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>

我制作了一个JSFIDDLE Demo

Answer 3

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

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 hover-color="{{social.color}}" ng-repeat="social in socialArray">{{social.name}}</div>

在Chrome和FF上测试过。 Try it on fiddle.

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

3 个答案: