javascript - ng-mouseover ng-mouseout 不工作

Question

下面是我的代码，如果其中一个内容变量以 * 开头，我试图让包含在 div 标签中的内容在鼠标经过它时改变背景颜色。但它不起作用......

// html

<style>
.normal{background-color: white}
.change{background-color: gainsboro}
</style>

<div ng-mouseover="checkAs(this)" ng-mouseout="this.className='normal'">
......
</div>

// js

$scope.checkAs = function(obj) {
        var name = $scope.opportunity.name;
        var asterisk = '*';
        if(name.startsWith(asterisk)) {
            obj.className='change';
        } else {
            obj.className='normal';
        }
    };

Answer 1

如果您决定以 Angular 执行此操作，则必须通过 ng-mouseover 调用一个函数，并且在该函数中，您将需要一个选择器，例如 JQuery或 Javascript's query selector ，然后根据需要修改元素。你必须做这样的事情(使用 JQuery):

$scope.checkAs = function() {
        $("div").hover(function() {
            $(this).prop('background-color','gainsboro');
        }, function(){
            $(this).prop('background-color','white');
        });
    };

但是，正如 PSL 所建议的，checkAs(this) 中的“this”将不是 DOM 元素。 CSS 解决方案可能更好:

div :hover{
   background-color: gainsboro
}