How to target current element on mouseover in angularjs?

Question

I want to show a custom icon on thumbnail over. So in my example "upload-thumb" is my thumb and my custom icon is span.

The problem is that I am not sure how to target currently hovered thumbnail as I have a few of these dynamically generated. As what I have right now when hovering all of the span icons show up.

 <div class="upload-thumb" ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)"><span class="delete-media" ng-show="hoverEdit"><i class="mdi mdi-delete"></i></span></div>

  $scope.hoverIn = function(event){
    //  this.hoverEdit = true;
  };

$scope.hoverOut = function(event){
    //  this.hoverEdit = false;
  };

Not sure why, but bin struggling with this for a while. Thanks.

You can achieve it using CSS i.e. .upload-thumb span.delete-media:hover{color:red} — Satpal
– Satpal, Commented Apr 10, 2017 at 11:02
It is more complicated than this. Span is not visible by default. Some how I have to assign this.hoverEdit = true; only to current hovered item. — funguy
– funguy, Commented Apr 10, 2017 at 11:14
Then assign a CSS class when hoverEdit is true. All logic to display icon should then be bothered by CSS. <span class="delete-media" ng-show="hoverEdit" ng-class="{'hoverEdit': hoverEdit}"> — Satpal
– Satpal, Commented Apr 10, 2017 at 11:15

Stephane Janicaud · Accepted Answer · 2017-04-10 12:15:55Z

Here is a sample snippet to retrieve your element and do whatever you want with it :

angular.module('app', []);

angular.module('app')
.controller('ExampleController', ['$scope', function($scope) {

	$scope.hoverIn = function(event){
	    //  this.hoverEdit = true;
	    var el = getElement(event);
	    // Do something with element, for example add a class
	    el.addClass('myClass');
	    console.log('hoverIn ' + el);
	  };

	$scope.hoverOut = function(event){
	    //  this.hoverEdit = false;
	    var el = getElement(event);
	    // Do something with element, for example remove a class
	    el.removeClass('myClass');
	    console.log('hoverOut ' + el);
	  };

	function getElement(event) {
		return angular.element(event.srcElement || event.target);
	}

}]);

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="script.js"></script>
  <style>
  .myClass { color: blue;  }
  </style>
</head>
 
<body ng-controller="ExampleController">
	<div ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb1</div>
	<div ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb2</div>
</body>
</html>

Edit: Here is another sample manipulating previous sibling (additional request from the post author)

angular.module('app', []);

angular.module('app')
.controller('ExampleController', ['$scope', function($scope) {

	$scope.hoverIn = function(event){
	    var el = getElement(event);
	    var previousElement = el.previousElementSibling;
	    if(previousElement) {
	    	angular.element(previousElement).addClass('myClass');
	    }
	  };

	$scope.hoverOut = function(event){
	    var el = getElement(event);
	    var previousElement = el.previousElementSibling;
	    if(previousElement) {
	    	angular.element(previousElement).removeClass('myClass');
	    }
	  };

	function getElement(event) {
		return event.srcElement || event.target;
	}

}]);

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="script.js"></script>
  <style>
  li { margin: 12px; }
  .myClass { color: blue;  }
  </style>
</head>
 
<body ng-controller="ExampleController">

<ul>
	<li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb1</li>
	<li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb2</li>
	<li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb3</li>
	<li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb4</li>
	<li ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)">thumb5</li>
</ul>

</body>
</html>

this might actually work, but not sure yet how to dynamically generate the data=thumbid with an incrementing number as I am generating this html dynamically like this: var newelement = $compile('<div class="upload-thumb" ng-mouseover="hoverIn($event)" ng-mouseleave="hoverOut($event)"><span class="delete-media" ng-show="hoverEdit"><i class="mdi mdi-delete" ng-click="removeFromLibrary($event)"></i></span></div>')($scope);
Ok I didn't have this information ^^ I change my snippet so you can retrieve the element and do whatever you want to do with it ;)
One last bit. class has to be applied to previous sibling. If I could get this example would work.

Sachila Ranawaka · Accepted Answer · 2017-04-10 11:16:02Z

Not sure is this what you looking for. But you can hide the child content using even.childNodes

In the html pass $event.target instead of just event

<div class="upload-thumb" ng-mouseover="hoverIn($event.target)" ng-mouseleave="hoverOut($event.target)">text   <span class="delete-media" >delete-icon</span></div>

then you can hide/show the relevant child node

$scope.hoverIn = function(event){ 
       event.childNodes["1"].hidden = true 
      };

      $scope.hoverOut = function(event){ 
          event.childNodes["1"].hidden = false 
      };
Demo

angular.module("app",[])
.controller("ctrl",function($scope){
 
  $scope.hoverIn = function(event){ 
   event.childNodes["1"].hidden = true 
  };

  $scope.hoverOut = function(event){ 
      event.childNodes["1"].hidden = false 
  };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div class="upload-thumb" ng-mouseover="hoverIn($event.target)" ng-mouseleave="hoverOut($event.target)">text   <span class="delete-media" >delete-icon</span></div>

  
</div>

Parikshit Bhagawati · Accepted Answer · 2017-04-10 11:36:32Z

0

In your hoverIn function try using event.currentTarget instead of this. Might solve the issue.

answered Apr 10, 2017 at 11:36

Parikshit Bhagawati

1621 silver badge15 bronze badges

Collectives™ on Stack Overflow

How to target current element on mouseover in angularjs?

3 Answers 3

6 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Related