如何在鼠标悬停时突出显示表格行

问题描述

我有这张桌子:

<div class="container" ng-app="sortApp" ng-controller="mainController">

  <table class="table table-bordered ">
    <thead>
      <tr>
        <td>
          <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
            Sushi Roll
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse">
          Fish Type
          </a>
        </td>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
        <td>{{ roll.name }}</td>
        <td>{{ roll.fish }}</td>
      </tr>
    </tbody>

  </table>

</div>

这是控制者:

angular.module('sortApp', [])

.controller('mainController', function($scope) {
  $scope.sortType     = 'name'; // set the default sort type
  $scope.sortReverse  = false;  // set the default sort order
  $scope.searchFish   = '';     // set the default search/filter term

  // create the list of sushi rolls
  $scope.sushi = [
    { name: 'Cali Roll', fish: 'Crab' },
    { name: 'Philly', fish: 'Tuna' },
    { name: 'Tiger', fish: 'Eel' },
    { name: 'Rainbow', fish: 'Variety' }
  ];

});

这里是提琴手.

我想使用ng-mouseover指令在鼠标悬停时突出显示表格行的边框.

I want to highlight the border of table row on mouse hover using ng-mouseover directive.

我该如何实施?

推荐答案

HTML:

<table class="table-hover">

CSS:

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

如果需要的话，可以将 tr 设置为可选:

And if else you want is to make the tr selectable:

HTML:

<tr ng-click="doSomething()">

CSS:

tr[ng-click] {
    cursor: pointer;
}

查看JSFiddle示例

这篇关于如何在鼠标悬停时突出显示表格行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！