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在鼠标悬停上显示图像

回答

相关问题