javascript - 无法为 child 附加 css 更改？ Angular

Question

angular.element($document[0].querySelector("table > tbody > tr")).mouseover().css("background-color", "red");

<table>
            <thead>
            <tr>
                <th>Name</th>
               
                <th>Phone</th>
                <th>Email</th>
             
            </tr>
            </thead>

            <tbody>

            <tr ng-repeat="person in contacts | filter:search| offset:currentPage*pageSize| limitTo:pageSize
            |orderBy:'name' ">
                <td>{{ person.name }}</td>
                <td>{{ person.phone }}</td>
                <td>{{ person.email }}</td>
                
            </tr>
            </tbody>

所以我尝试在鼠标悬停在表中的行时实现高亮，但我无法访问子元素？

当我尝试访问 tbody 时没有问题，但是当我尝试访问 tr 时悬停时每一行都会突出显示？

我做错了什么？

在 firefox 控制台中，tr 元素具有 ng-scope 类，但这仅意味着它已连接到我的 api 中的 Controller ？所以应该没问题吧？

Answer 1

你想做的可以用简单的css实现。你不需要使用 angular 来设置 css。

table > tbody > tr:hover {
  background-color: red;
}

看到这个 fiddle http://jsfiddle.net/xxcp767e/