2017-12-26 22 views
0

マウスがそのテキストをポイントしているときに、テーブルの列のデータ(テキスト)の色を変更する必要があります。私はテーブルの最初の列の色を変更する必要はありません。 次のコードを実装しました。しかし、正常に動作しません。マウスオーバー機能の条件を設定する方法

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

私はangualr jsを使用しています。

+0

をクラス/スタイルを追加することによって、必要な列の色を変更することができますCSS自体でこれを処理しますか? Angular JSを使用する特別な理由はありますか? –

+0

私はCSSでそれを扱う正確な方法を理解できません。 – user3724599

+0

したがって、CSSを使用する場合は、応答のサンプルコードを確認してください。 –

答えて

0
<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 
    } 
0

あなたは、テーブルのデフォルトの色を設定して、なぜない

<!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> 
関連する問題