Question

当鼠标指向该文本时，我需要更改表格列中数据（文本）的颜色。我不需要更改表格第一列的颜色。我实现了以下代码。但它不能正常工作。

onmouseover="{{$index==0?this.style.color='black':this.style.color='#f06751'}}"
onmouseout="this.style.color='black'"

我正在使用angualr js。

Answer 1

<td ng-style="myColour" ng-mouseenter="ng-mouseenter="changeColor(index,true)""></td>

Controller.js

 $scope.changeColor = function(index,bool) {
     if(bool === true) {
        $scope.myColour = {color: '#c5c2c2'};
    } else if (bool === false) {
        $scope.myColour = {color: 'white'}; //or, whatever the original color is
    }

Answer 2

您可以设置表格的默认颜色，然后通过添加类/样式来更改所需列的颜色

<!DOCTYPE html>
<html>

  <head>
    <style type="text/css">
      .changeColor:hover {
        color:#f06751;
      }
      .changeColor {
        color: blue;
          cursor:pointer;
      }
      .tab, .tab tr, .tab td, .tab th {
        border: 1px solid #000;
        border-collapse: collapse;
        padding: 5px;
      }
    </style>
  </head>

  <body>
    <table class="tab">
      <tr>
        <th>SL No</th>
        <th>Description</th>
      </tr>
      <tr>
        <td>1</td>
        <td class="changeColor">Something</td>
      </tr>
    </table>

  </body>

</html>

如何在鼠标悬停功能上设置if else条件

2 个答案: