마우스 오버시 마우스 오버시에만 적용 하시겠습니까?

집중된 효과를 시뮬레이트하려하거나 angular.js를 사용하여 마우스를 올리면 효과가 나타납니다. 결국 이것은 <tr>에 적용될 것입니다. 그러나 지금은 단지 개념의 증거 일뿐입니다. 마우스 오버시 마우스 오버시에만 적용 하시겠습니까?

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-example70-production</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 
 
</head> 
 
<body ng-app=""> 
 
    <button ng-mouseover="count = count + 1; myMousedOver={'background-color': '#eeeeee'}" ng-init="count=0"> 
 
    <!--count = count + 1 // not relevant; --> 
 
    Increment (when mouse is over) 
 
    </button> 
 
    <span ng-style="myMousedOver">count: {{count}}</span> 
 
</body> 
 
</html>

여기 색상 변화되지만, 색상이 나와있다. 배경색으로 CSS를 다시 설정하는 방법을 모르겠다. #ffffff 버튼이 마우스 오버 될 때 중지됩니다. (나는 CSS를 설정하고 설정을 유지하는 것을 본다.) ng-mouseover 클래스에 if 문을 넣을 수 있는지 여부조차 모르겠다.이 문제에 대한 내 첫 번째 추측이 될 것이다. plunkr에

코드 : http://plnkr.co/edit/kigG9r2vW8HdOg8WrF5i?p=preview

출처

2014-10-30 J-Dizzle

실제로 정확하게 당신이 원하는 것을 할 것 ngMouseLeave라는 각도 지시어가있다. 버튼에 ngMouseLeave를 던지고 카운트를 줄이고 색상을 변경하십시오. 문서 here을보십시오.

편집 :을 heres plunkr for reference 및 미리보기 :

<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example - example-example70-production</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 
 
</head> 
 
<body ng-app=""> 
 
    <button ng-mouseover="count = count + 1; myMousedOver={'background-color': '#eeeeee'}" ng-mouseLeave="myMousedOver={'background-color': ''}; count = count - 1" ng-init="count=0"> <!--count = count + 1; --> 
 
    Increment (when mouse is over) 
 
</button> 
 
<span ng-style="myMousedOver">count: {{count}}</span> 
 
</body> 
 
</html>

출처

2014-10-30 21:00:06 AlvinJ

마우스 오버시 마우스 오버시에만 적용 하시겠습니까?

답변

관련 문제