CODEWITHSUNDEEP
javascripthtmlcssangularjs
J-Dizzle
J-Dizzle

Reputation: 3191

Apply ng-mouseover only when moused over?

I'm trying to simulate a focused effect, or a hover effect using angular.js. Eventually this will be applied to <tr>'s but for now this is just a proof of concept.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example70-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body ng-app="">
  <button ng-mouseover="count = count + 1; myMousedOver={'background-color': '#eeeeee'}" ng-init="count=0">
    <!--count = count + 1 // not relevant; -->
    Increment (when mouse is over)
  </button>
  <span ng-style="myMousedOver">count: {{count}}</span>
</body>
</html>

Here it is changing the color, but the color is sticking. I don't know how to reset the css back to background-color: #ffffff when the button stops being moused over. (I see that I am setting the css and leaving it set) I don't even know if I can put an if statement in the ng-mouseover class, which would be my first guess to approach this problem.

code snippet on plunkr: http://plnkr.co/edit/kigG9r2vW8HdOg8WrF5i?p=preview

Upvotes: 0

Views: 884

Answers (1)

AlvinJ
AlvinJ

Reputation: 271

There is actually an angular directive called ngMouseLeave which would do exactly what you want. Just throw an ngMouseLeave on your button and decrease the count and change the colour on it. Take a look at the documentation here.

EDIT: Heres a plunkr for reference, and a snippet:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example70-production</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
</head>
<body ng-app="">
   <button ng-mouseover="count = count + 1; myMousedOver={'background-color': '#eeeeee'}" ng-mouseLeave="myMousedOver={'background-color': ''}; count = count - 1" ng-init="count=0"> <!--count = count + 1; -->
   Increment (when mouse is over)
 </button>
 <span ng-style="myMousedOver">count: {{count}}</span>
</body>
</html>

Upvotes: 2

Related Questions