So zeigen Sie ein Bild mit Mouseover über dem jeweiligen Dateinamen an - angularjs

Question

Ich kann Dateibild und Titel bei mouseovering für die jeweilige Datei anzeigen. Aber für alle Dateinamen werden das Bild und der Titel an der gleichen Stelle angezeigt.

Ich muss das jeweilige Bild und Titel oben auf den jeweiligen Dateinamen anzeigen. Wenn die Seite geladen wird, habe ich diese kleine Schachtel gesehen. Ich weiß nicht warum.

Nach Mouseover auf dem ersten Dateinamen oder zweite Dateinamen bewegen, wird es wie unten das Bild und Titel in der gleichen Stelle angezeigt werden soll.

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

Gebrauch machen, Schauen Sie sich die folgenden Code

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> 

Winkelregler

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

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

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

Update 1:

Basierend auf den Kommentar, den ich aus folgendem Grund aktualisiert

Winkelregler

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> 

Der Plunker bleibt gleich und es wird aktualisiert. Schauen Sie sich die LIVE DEMO

Answer 2

Try -

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

Answer 3

können Sie tun dies mit ng-if ng-Show/verstecken wie Beispiel unten.

$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> 

in Funktion können Sie den Dateinamen übergeben und Sie können die in den Richtlinien gebaut Winkel viel mehr