gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 03:28:43 25 4
gpt4 key购买 nike

我正在尝试使用 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 的 Angular Directive(指令),它可以完全按照您的要求进行操作。只需在您的按钮上扔一个 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>

关于javascript - 仅在鼠标悬停时应用 ng-mouseover?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26663074/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com