如何在鼠標懸停在相應文件名上方的位置顯示圖像-angularjs

Question

我可以在將鼠標懸停在相應文件上時顯示文件圖像和標題。 但是對於所有文件名，圖像和標題都顯示在同一位置。

我需要在相應文件名的上方顯示相應的圖像和標題。 頁面加載后，我看到了這個小盒子。 我不知道為什么

將鼠標懸停在第一個文件名或第二個文件名上后，它將在以下相同位置顯示圖像和標題。

HTML：

<style>
 .hover-image {
        width: 30px;
        height: 30px;
        border-radius: 20%;
        position: absolute;
        margin-top: -10px;
    margin-left: 5px;
    }

    img.hover-image {
        border: none;
        box-shadow: none;

    }

    .hover-title {
        color:black; 
        position: absolute; 
        margin-top: -20px;
    }

</style>

<div class="file-image-tags1">
            <ul>
                <span style="width: 200px;"><a ng-show="hideHoveredImage==false;" class="hover-title">{{hoverTitle}}<img class="hover-image" src="{{hoveredImage}}"></a></span>
                <li ng-repeat="image in files | filter :'image'" >

                    <div class="file-tag-baloon1" ng-mouseover="hoverImg(image.id)" ng-mouseleave="hoverOut()">
                        <span>


                            <a ng-click="photoPreview(image.id);" >{{image.fileshortname}}</a>

                        </span>
                        <span><a ng-click="removeImage(image.id)" class="remove1">X</a></span>
                    </div>
                </li>
            </ul>
        </div>

Answer 1

使用內置的角度指令，查看下面的代碼

的HTML

<span ng-hide="show">
    <img ng-src="https://unsplash.it/200/300/?random" />

    </span>
  <br/>
  <span ng-mouseover="show=!show" ng-mouseleave="show=!show">
     Image name </span>

角度控制器

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.show="false";
});

更新1 ：

根據我更新的評論如下

角度控制器

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.show = "false";
  $scope.arrayofJson = [{
      imageTitle: "someImageName1",
      imagePath: "http://lorempixel.com/400/200/",
      show: "false"
    }, { 
      imageTitle: "someImageName2",
      imagePath: "https://unsplash.it/200/300/?random",
      show: "false"
    }, { 
      imageTitle: "someImageName3",
      imagePath: "https://unsplash.it/200/300/?random",
      show: "false"
    }, {
      imageTitle: "someImageName4",
      imagePath: "https://unsplash.it/200/300/?random",
      show: "false"
    }


  ];
});

的HTML

<div ng-repeat="item in arrayofJson">
    <span ng-hide="item.show">
    <img ng-src="{{item.imagePath}}" />    </span>
    <br/>
    <span ng-mouseover="item.show=!item.show" ng-mouseleave="item.show=!item.show">
     {{item.imageTitle}} </span>

  </div>

塞子保持不變，並且已更新。 查看現場演示

Answer 2

嘗試-

.file-image-tags1
{
position : absolute;
}

Answer 3

您可以使用ng-if ng-show / hide來執行此操作，如以下示例所示。

$scope.hoverIn = function(){
    this.hoverImage = true;
};

$scope.hoverOut = function(){
    this.hoverImage = false;
};

<ul>
<span ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">Hover Me</span>
        <span ng-show="hoverImage">
            <img>.....</a>
        </span>
    </li>
</ul>

在功能上，您可以傳遞文件名，並且可以做更多的事情