仅在鼠标悬停时应用ng鼠标悬停

Apply ng-mouseover only when moused over?

本文关键字：鼠标 悬停 ng 应用      更新时间：2023-09-26

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

实际上有一个名为ngMouseLeave的角度指令，它可以执行您想要的操作。只需在你的按钮上扔一个鼠标左键，减少计数并更改颜色。看看这里的文档。

编辑：这里有一个plunkr供参考，还有一个片段：

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

相关文章：