I am attempting to implement a hover effect where an image is displayed over another image upon hovering over its container. I have been trying to achieve this using Angular and ng-show, but for some reason, the image with the ng-show attribute remains hidden. Here's a snippet of my code:
<header class="header">
<a routerLink="/">
<div class="header__link" ng-controller="testCtrl"
ng-init="show = false"
ng-mouseenter="show = true"
ng-mouseleave="show = false">
<img class="header__link--logo" src="assets/img/logo2.jpeg">
<img class="header__link--logo--hover" src="assets/img/logo2hover.jpeg"
ng-show="show">
<h1 class="header__link--title">
INMOCO
</h1>
</div>
</a>
<nav>
</nav>
</header>
var app = angular.module("testApp", []);
console.log("app");
app.controller('testCtrl', function($scope){
$scope.show = false;
});
I'm seeking assistance in understanding why the Angular-specific code isn't functioning as intended or if there is a simpler approach to achieving this effect. Any help would be greatly appreciated!