javascript - Apply ng-mouseover only when moused over? -
javascript - Apply ng-mouseover only when moused over? -
i'm trying simulate focused effect, or hover effect using angular.js. applied <tr>'s proof of concept.
class="snippet-code-html lang-html prettyprint-override"><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 over) </button> <span ng-style="mymousedover">count: {{count}}</span> </body> </html>
here changing color, color sticking. don't know how reset css background-color: #ffffff when button stops beingness moused over. (i see setting css , leaving set) don't know if can set if statement in ng-mouseover class, first guess approach problem.
code snippet on plunkr: http://plnkr.co/edit/kigg9r2vw8hdog8wrf5i?p=preview
there angular directive called ngmouseleave want. throw ngmouseleave on button , decrease count , alter colour on it. take @ documentation here.
edit: heres plunkr reference, , snippet:
class="snippet-code-html lang-html prettyprint-override"><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 over) </button> <span ng-style="mymousedover">count: {{count}}</span> </body> </html>
javascript html css angularjs
Comments
Post a Comment