Question

我是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/>

我在标记中添加了额外的内容，例如公司，大小在mouseover。帮助我在mouseover上弹出图像。提前致谢

Answer 1

你必须做两件事。首先，你必须将你的弹出元素置于绝对位置，这样当它弹出时它不会干扰其他元素的流动。像这样的事情（z-index使它超越其他元素）：

.popover {
  position: absolute;
  z-index: 100;
}

在你的html-markup中你可以使用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;
};

如果你有多个，你最好将所有这些东西放入指令

在Angularjs中弹出一个鼠标悬停的div

1 个答案: