CODEWITHSUNDEEP
javascriptangularjs
mohammad maleki
mohammad maleki

Reputation: 74

can some body help me with ng-mouseover and ng-mouseleave in angularjs?

I have a code like this in my html:

<div ng-mouseover="show_up()" ng-mouseleave="dont_show_up()" class="contain">
    <img src="image/first_image.jpg">
    <div class="overlay" ng-style="overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>
<div ng-mouseover="show_up()" ng-mouseleave="dont_show_up()" class="contain">
    <img  src="image/second_image.jpg">
    <div class="overlay" ng-style="overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>

and this is my js code :

$scope.show_up = function () {
       $scope.overlay={
           "height":"100%"
       };
    };
    $scope.dont_show_up = function () {
        $scope.overlay={
            "height":"0"
        };
    }

this is what I need to happen: whenever I hover on my first image it should add the style "height:100%" to my first image, not both of them! and when I hover on my second image it should add the style "height:100%" to my second image, not both of them! how can I fix this problem?

Upvotes: 2

Views: 64

Answers (2)

J&#243;zef Podlecki
J&#243;zef Podlecki

Reputation: 11283

One solution would be passing some value to show_up() and dont_show_up() function, which identifies an image, say 1, 2 and then, inside function, change overlay variable to array and update appropriate item. ng-style="overlay" must be also changed to ng-style="overlays[0]"

--Edit

<div ng-mouseover="show_up(0)" ng-mouseleave="dont_show_up(0)" class="contain">
    <img src="image/first_image.jpg">
    <div class="overlay" ng-style="overlays[0]">
        <a href="#!" class="text">show songs</a>
    </div>
</div>
<div ng-mouseover="show_up(1)" ng-mouseleave="dont_show_up(1)" class="contain">
    <img  src="image/second_image.jpg">
    <div class="overlay" ng-style="overlays[1]">
        <a href="#!" class="text">show songs</a>
    </div>
</div>

$scope.show_up = function (index) {
  $scope.overlays[index] = {
    "height":"100%"
  };
};
$scope.dont_show_up = function (index) {
  $scope.overlays[index] = {
    "height":"0"
  };
}

Well that becomes difficult to maintain when number of images increase

Second solution. You can store all images as an array of objects and apply ng-repeat directive to loop through them.

<div ng-repeat="image in images" ng-mouseover="show_up(image.id)" ng-mouseleave="dont_show_up(image.id)" class="contain">
    <img ng-src="image.src">
    <div class="overlay" ng-style="image.overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>

$scope.show_up = function (id) {
    $scope.images.find(image => image.id === id).overlay = {
      "height":"100%"
    };
  };
$scope.dont_show_up = function (id) {
   $scope.images.find(image => image.id === id).overlay = {
     "height":"0"
   };
  }

Upvotes: 2

gavgrif
gavgrif

Reputation: 15499

Not sure what you are trying to achieve since you state you want the image to change from 0 - 100% on the mouseover - but the ng-style is applied to the overlay. I assume you are trying to overlay the text over the image?

Anyway you don't need angular or even javascript for this - just CSS and apply a :hover on the parent level and style on the child element and you can achieve the desired outcome without the cost of the js. 

.overlay {
  height: 0;
  overflow: hidden
}

.contain:hover .overlay {
  height: 100%;
}
<div class="contain">
    <img src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" height="150">
    <div class="overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>
<div  class="contain">
    <img  src="https://images-na.ssl-images-amazon.com/images/I/61W2FTW9ePL._AC_SL1500_.jpg" height="150">
    <div class="overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>

Upvotes: 0

Related Questions