Angular mouseenter not working in Chrome
I am coding my first app in Angular and I am facing a problem with the mouseenter event. It doesn't work at all in Chrome. First, I thought I had a bug in my code, but I tested it in Firefox and everything worked fine. I decided to test some code with mouseenter from jsfiddle and it looks the same - on firefox ok, on chrome not - after mouseenter on li, nothing happens.
Tested code:
<!DOCTYPE html>
<html ng-app="my-app">
<head>
<meta charset="utf-8" />
<style>
/* Put your css in here */
button {
position: relative;
float:right;
top:-40px;
right:0;
}
li {
background: #eee;
padding: 5px;
list-style:none;
width: 200px;
}
</style>
<script src="angular.js"></script>
<script>
var app = angular.module('my-app', [], function () {
})
app.controller('AppController', function ($scope) {
$scope.name = 'World';
})
</script>
</head>
<body ng-controller="AppController">
<p>Hello {{name}}!</p>
<ul>
<li ng-mouseenter="showXBtn = true;
test($event)" ng-mouseleave="showXBtn = false;
test($event)">
<p ng-mouseenter="showXBtn = false;" ng-mouseleave="showXBtn = true;
test($event)">Hide</p>
<button ng-show="showXBtn"><span>x</span></button>
</li>
</ul>
{{showXBtn}}
</body>
</html>
I am using AngularJS v1.2.5. Is this an official mistake? Or maybe there is something wrong with my chrome. I have the latest version 38.0.2125.111 m. Thanks for any suggestions.
source to share
I had a similar issue with Chrome and ended up tracking down the issue back to a specific Chrome extension (for me, it's AngularJS Batarang extension ).
If you have javascript profiling extensions, the slowness they add to your page can sometimes cause unusual behavior in events (in particular, mouseenter and mouseleave events).
source to share