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

前端之家收集整理的这篇文章主要介绍了AngularJS如何实现鼠标移入显示,鼠标移出隐藏的效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

猜你在找的Angularjs相关文章