我正在尝试使用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重置为background-color:#ffffff,当该按钮停止滑过鼠标时。 (我看到我正在设置css并将其保持不变)我什至不知道是否可以在ng-mouseover类中放置if语句,这是我首次尝试解决此问题。
plunkr上的代码段:http://plnkr.co/edit/kigG9r2vW8HdOg8WrF5i?p=preview
最佳答案
实际上,有一个名为ngMouseLeave的角度指令可以完全满足您的要求。只需在按钮上扔一个ngMouseLeave并减少计数并更改其颜色即可。查看文档here。
编辑:这是一个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>