angular.js - angularjs labels keep flashing when hovering with the mouse

Question

When I was writing a mouse hover event using angularjs, I found that the label kept flashing when the mouse was pressed. The angular code is as follows:

<p ng-init="show=true" class="carousel-caption alert alert-success login-status">
     <label ng-show="show" ng-mouseenter="show=false" ng-mouseleave="show=true">
           登录成功
     </label>
     <p ng-show="!show">
          进入主页
     </p>
 </p>
 

Is there anything wrong with this code?

The effect to be achieved is that when the mouse hovers over the label of successful login, the enter home page label will appear. Please give me some pointers if you see the problem, thank you very much!

Answer 1

Write ng-mouseleave in the p on the homepage and try it.

Answer 2

1. Try not to do it ng-init, initialize it in the controller

2. Put ng-show 改成 ng-if
   3. 如果还是不行，用 ng-class to control and try again

Answer 3

Just write ng-mouseleave into p.