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>I am attempting to highlight rows when the mouse moves over a table, but I am having trouble accessing the child elements. Can anyone help?
I can easily access the tbody, but encountering difficulties when trying to access the tr element so that each row will be highlighted on hover.
What could be going wrong here?
In Firefox console, the tr element has a class of ng-scope, but this simply indicates it is connected to the controller in my API. Shouldn't this pose any problems?