Question

我正在尝试使用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

Answer 1

实际上有一个名为ngMouseLeave的角度指令可以完全按照你的意愿行事。只需在按钮上抛出一个ngMouseLeave，减少计数并更改颜色。请查看文档here。

编辑：下面是一个plunkr for reference和一个片段：

＆＃13;

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

＆＃13;

仅在鼠标悬停时应用ng-mouseover？

1 个答案: