마우스 오버 기능에서 다른 조건을 설정하는 방법

마우스가 해당 텍스트를 가리키면 테이블 열의 데이터 (텍스트) 색을 변경해야합니다. 나는 테이블의 첫 번째 열에서 색을 변경할 필요가 없습니다. 다음 코드를 구현했습니다. 하지만 제대로 작동하지 않습니다.마우스 오버 기능에서 다른 조건을 설정하는 방법

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

저는 angualr js를 사용하고 있습니다.

출처

2017-12-26 user3724599

을 클래스/스타일을 추가하여 필요한 컬럼의 색상을 변경할 수 있습니다 CSS 자체에서 이것을 처리 할 수 있습니까? Angular JS를 사용해야하는 특별한 이유가 있습니까? –

CSS로 처리하는 정확한 방법을 알 수 없습니다. – user3724599

그렇다면 CSS를 사용하려는 경우 회신에서 샘플 코드를 확인하십시오. –

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

출처

2017-12-26 07:23:33 Ruta

당신은 테이블의 기본 색상을 설정 한 다음 왜하지

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

출처

2017-12-26 07:28:02

마우스 오버 기능에서 다른 조건을 설정하는 방법

답변

관련 문제