Question

我正在使用ng-repeat指令生成一些div标签。我想要的是当用户将鼠标悬停在其中一个div标签上时，只有该div标签才会改变其背景。但是，就目前而言，当用户将鼠标悬停在标记上时，所有ng-repeat生成的元素都会应用属性。

这是我的元素代码：

    <div class="col-xs-12">
        <div class="row">
            <div ng-repeat="verb in verbArray | filter: filterText" class="col-xs-12 col-sm-3" 
             ng-mouseenter="changeColor(true)" ng-mouseleave="changeColor(false)"
             ng-style="highlightColor">
                {{verb.name}}<img src="{{verb.presentImage}}"/><img src="{{verb.pastImage}}"/>
            </div>
        </div>
    </div>

这是控制器中的changeColor函数

    $scope.changeColor = function(theBool) {
        if(theBool === true) {
            $scope.highlightColor = {'background-color': 'green'};
        } else if (theBool === false) {
            $scope.highlightColor = {'background-color': 'white'}; //or, whatever the original color is
        }
    };

我怎样才能使应用了changeColor函数的唯一东西是正在盘旋的元素？

感谢您的帮助

编辑：如果我使用CSS，它会像这样工作：

            <div ng-repeat="verb in verbArray | filter: filterText" class="col-xs-12 col-sm-3" 
             ng-mouseenter="changeColor(true)" ng-mouseleave="changeColor(false)"
             ng-style="highlightColor" class="classOne">
                {{verb.name}}<img src="{{verb.presentImage}}"/><img src="{{verb.pastImage}}"/>
            </div>
        </div>

CSS文件

.classOne:hover {
 background-color: green;
}

Answer 1

您可以使用CSS通过：悬停选择器（https://www.w3schools.com/cssref/sel_hover.asp）获得此效果

像这样：

div:hover {
    background-color:green;
}

通过CSS执行此操作通常比使用Angular执行此操作更快。

Angularjs：如何将CSS属性应用于ng-repeat指令

1 个答案: