AngularJS如何实现鼠标移入显示,鼠标移出隐藏的效果

发布时间：2020-12-17 09:18:49 所属栏目：安全来源：网络整理

导读：在项目开发中，经常会用到鼠标移入显示,鼠标移出隐藏的效果，在angularjs中，主要使用了ng-mouseenter与 ng-mouseleave 这两个指令来实现鼠标的移入时显示，移出时隐藏的效果。示例如下： !doctype htmlhtml ng-app="plunker" head meta charset="utf-8" ti

在项目开发中，经常会用到鼠标移入显示,鼠标移出隐藏的效果，在angularjs中，主要使用了ng-mouseenter与 ng-mouseleave 这两个指令来实现鼠标的移入时显示，移出时隐藏的效果。

示例如下：

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write("<base href="" + document.location + "" />");</script>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.angularjs.org/1.1.0/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <span ng-mouseenter="show = true" ng-mouseleave="show = false">
    Mouse over me.
  </span>
  <br /><br />
  <div ng-show="show">Hello!</div>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!