Wie setze ich, wenn sonst Bedingung auf Maus über Funktion

Ich muss die Farbe der Daten (Text) in der Tabellenspalte ändern, wenn die Maus auf diesen Text zeigt. Ich muss die Farbe in der ersten Spalte der Tabelle nicht ändern. Ich habe folgenden Code implementiert. Aber es funktioniert nicht richtig.Wie setze ich, wenn sonst Bedingung auf Maus über Funktion

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

Ich benutze angualr js.

Quelle

2017-12-26 user3724599

Warum nicht Sie behandeln das in CSS selbst? Gibt es einen besonderen Grund, Angular JS zu verwenden? –

Ich kann nicht genau herausfinden, wie man es in CSS behandelt. – user3724599

Also, wenn Sie CSS verwenden, dann überprüfen Sie den Beispielcode in der Antwort. –

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

Quelle

2017-12-26 07:23:33 Ruta

Sie können die Standardfarbe für die Tabelle gesetzt und dann die Farbe für die gewünschte Spalte durch Hinzufügen Klasse/style

<!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>

Quelle

2017-12-26 07:28:02

Wie setze ich, wenn sonst Bedingung auf Maus über Funktion

Antwort

Verwandte Themen