我是AngularJS的新手,如何使用AngularJS在mouSEOver上弹出一个div.如果我在鼠标悬停时调整div的大小,它会改变整个结构,如何在不打扰邻居元素的情况下显示弹出div.
<div ng-repeat="x in images | filter:test" style="float:left; width:30%" ng-mouSEOver="count=1" ng-mouseleave="count=0" > <img ng-src="{{x.path}}" style="width: 100px; height:100px"><div> {{x.company}}</div> <div style="background-color:#E6E6FA;text-align: center;"ng-show="count"> price:{{x.price}}</br> size:{{x.size}}</br> </div> </img> <div/>
你必须做两件事.首先,您必须将弹出元素置于绝对位置,以便在弹出时不会干扰其他元素的流动.像这样的东西(z-index使它超越其他元素):
.popover { position: absolute; z-index: 100; }
在你的html标记中,你可以使用ng-mouSEOver指令.
<div ng-mouSEOver="showPopover()" ng-mouseleave="hidePopover()"> more info </div> <div class="popover" ng-show="popoverIsVisible">Popover Content</div>
您的角度控制器可能看起来像这样
$scope.showPopover = function() { $scope.popoverIsVisible = true; }; $scope.hidePopover = function () { $scope.popoverIsVisible = false; };
如果你有多个,你最好把所有这些东西都放到一个指令中
原文地址:https://www.jb51.cc/angularjs/240344.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。