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

使用angular内置指令，查看以下代码

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>

plunker保持不变并更新。查看LIVE DEMO

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>

在功能中你可以传递文件名，你可以做更多的事情

如何在鼠标悬停上方显示图像 - 相应的文件名 - angularjs

3 个答案: