всплывающее окно div при наведении мыши в Angularjs

Я новичок в AngularJS, как я могу показать всплывающее окно div на mouseover использование AngularJS. Если я изменяю размер 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. помогите мне в pop изображение на mouseover. Заранее спасибо

6
angularjs angularjs-directive mouseover onmouseover

1 ответов

вы должны сделать две вещи. Сначала вы должны расположить свой элемент popover absolute, чтобы он не нарушал поток других элементов, когда он появляется. Что-то вроде этого (Z-индекс-это то, что заставляет его быть над другими элементами): 

.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;
};

Если вы имеете больше чем одно, то вы вероятно, лучше поместить все это в директиву

8