AngularJS在鼠標懸停上顯示圖像

在此fiddle中，我想將鼠標懸停在「您的真實」上並讓圖像出現，文字消失。一個應用程序必須進行初始化才能正常工作？我不認爲它沒有...AngularJS在鼠標懸停上顯示圖像

角HTML這個樣子的（我沒動我的整個應用程序在這裏，只是試圖讓這部分工作）

<a ng-init="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'"> 
<span ng-hide="imgsrc.show" 
     ng-mouseover="imgsrc='http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'" 
     ng-mouseout="imgsrc.hide"> 
     Yours Truly 
</span> 
<img ng-src="{{imgsrc}}"/> 
</a>,

來源

2017-05-24 JacobIRR

它是可能做這樣的工作沒有一個適當的控制器，但我會勸阻它。這就是說，我繼續得到它反正工作：

<p class="text-justify last-body" ng-app> 
    This growing collection of studies, curated by 
    <a ng-init="imgsrc={ 
    src: 'http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg', 
    show: false, 
    };"> 
    <span ng-mouseover="imgsrc.show = true" ng-mouseout="imgsrc.show = false"> 
     Yours Truly 
    </span> 
    <img ng-src="{{ imgsrc.src }}" ng-show="imgsrc.show" /> 
    </a>, 
    is focused primarily 
    on studies dealing with eh tohp ah key pig*. As a fan of mooshoo and aigeiaig, I'm open to 
    working with any dataset ranging from yakdkat studies to lakuktauka. If you would like 
    to submit a study for publishing, or if you have any questions about a particular study, 
    please feel free to <a href="/contact">Contact Me.</a> Thank you for visiting, and happy wamotiem! 
</p>

這將顯示圖像，當你將鼠標懸停在「此致」，並隱藏圖像，當你移動鼠標了。阻止你的例子工作的主要原因是缺少來自最頂層元素的ng-app指令。除此之外，我還清理了一些邏輯，以便更容易理解發生了什麼。

這裏是一個JSFiddle，如果你想看到它的行動：https://jsfiddle.net/kv4qvu3w/2/

來源

2017-05-24 07:03:38 IAmKale

你可以使用ng-show這個

試試這個

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 
    <script type="text/javascript"> 
 
    var app = angular.module('myApp', []); 
 

 
    app.controller('surveyController', function($scope){ 
 
     $scope.imgsrc = 'http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'; 
 

 
     $scope.changeImg = function(type){ 
 
     if (type == 'hover') { 
 
      $scope.imgsrc = 'http://wallpaper-gallery.net/images/pig-images/pig-images-12.jpg'; 
 
     }else{ 
 
      $scope.imgsrc = ''; 
 
     } 
 

 
     } 
 

 
    }); 
 

 

 
    </script> 
 
</head> 
 
<body ng-controller="surveyController" ng-app="myApp"> 
 

 
    <div ng-mouseover="changeImg('hover')" ng-mouseout="changeImg('out')">hover me to hide img</div> 
 

 
    <div ng-show="imgsrc.length>2"> 
 
    <img style="height: 200px; width: 200px;" ng-src="{{imgsrc}}"/> 
 
    </div> 
 
</a>, 
 
{{imgsrc}} 
 
</body> 
 
</html>

來源

2017-05-24 06:47:52

AngularJS在鼠標懸停上顯示圖像

回答

相關問題