在 Angularjs 鼠标悬停时弹出 div

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-标记中，您可以使用 ng-mouseover 指令。

<div ng-mouseover="showPopover()" ng-mouseleave="hidePopover()">
  more info
</div>
<div class="popover" ng-show="popoverIsVisible">Popover Content</div>

您的 angular 控制器可能看起来像这样

$scope.showPopover = function() {
  $scope.popoverIsVisible = true; 
};

$scope.hidePopover = function () {
  $scope.popoverIsVisible = false;
};

如果你有多个，你最好把所有的东西都放在一个指令中

在 Angularjs 鼠标悬停时弹出 div

popup a div on mouseover in Angularjs

mouseover

onmouseover

angularjs

angularjs-directive