javascript - Angularjs:如何将 CSS 属性应用于由 ng-repeat 指令生成的单个元素

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>

这里是 Controller 中的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 通过 :hover 选择器 ( https://www.w3schools.com/cssref/sel_hover.asp ) 获得此效果

像这样:

div:hover {
    background-color:green;
}

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