在项目开发中,经常会用到鼠标移入显示,鼠标移出隐藏的效果,在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>