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

来源:互联网 发布:守护小天使app软件 编辑:程序博客网 时间:2024/05/17 23:31

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

阅读全文
0 0
原创粉丝点击