如何在ng-mouseover上顯示div並在ng-mouseleave上隱藏相同的div？

下面的代碼顯示鼠標懸停的div，但不會隱藏鼠標離開div。如何更正代碼？如何在ng-mouseover上顯示div並在ng-mouseleave上隱藏相同的div？

<html ng-app=""> 
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 

<center> 
    <br> 
    <p ng-model="x" ng-mouseover="x='true'" ng-mouseleave="x='false'">HOVER HERE</p> 
    <br> 
    {{x}} 
    <div ng-show="x" style="position: relative;top: 100px;left: 0px;width: 100px;height: 100px;background-color: grey;"></div> 

</center>

來源

2016-10-22 user5844653

<html ng-app=""> 
 
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 

 
<center> 
 
    <br> 
 
    <p ng-model="x" ng-mouseover="x=true" ng-mouseleave="x=false">HOVER HERE</p> 
 
    <br> 
 
    {{x}} 
 
    <div ng-show="x" style="position: relative;top: 100px;left: 0px;width: 100px;height: 100px;background-color: grey;"></div> 
 

 
</center>

我所做的唯一變化是x='true'到x=true。（刪除單引號）。當有報價時，x被設置爲一個字符串。因此，在評估ng-show='x'時，x始終是一個字符串，並且總是評估爲真值。

來源

2016-10-22 05:52:35 Chanthu

如何在ng-mouseover上顯示div並在ng-mouseleave上隱藏相同的div？

回答

相關問題