Angularjs覆蓋ng-show隱藏於：hover

Question

我有一系列「圖標」，我在我的模板中顯示。

<div ng-repeat="data in items | orderBy:'-timestamp'"> 
    <div class="icon"> 
     <i>1</i> 
     <span>2</span> 
    </div> 
</div> 

我有以下的CSS展現span時.icon是在徘徊和隱藏i。

.icon:hover i { display: none; } 
.icon:hover span { display: block; } 

不過，我也希望能夠表現出的span時$scope.options == true每一個實例。因此，我增加了以下內容：

<i ng-hide="options">1</i> 
<span ng-show="options">2</span> 

但現在，我:hover壞了，沒有最終顯示span。

有沒有辦法來覆蓋ng-show，以便我的css仍然會display:block當它被徘徊？

Answer 1

plunker

可以跳過CSS，讓角手柄採用NG-的mouseenter/NG-鼠標離開它。然後使用or在第二個變量變爲真時顯示它。

HTML：

<div ng-repeat="data in items | orderBy:'-timestamp'"> 
    <div ng-mouseenter="options=true" ng-mouseleave="options=false" class="icon"> 
     <i ng-hide="options || checkbox">1</i> 
     <span ng-show="options || checkbox">2</span> 
    </div> 

</div> 
<input type='checkbox' ng-model="checkbox" ng-click="options=!options">Show 

Answer 2

使用$scope.options值爲您的.icon div添加一個類，然後制定更具體的CSS規則以覆蓋:hover事件。

<div class="icon" ng-class="{ override: $scope.options == true }"> 
    <i ng-hide="options">1</i> 
    <span ng-show="options">2</span> 
</div> 

而在你的CSS：

.icon.override:hover i { display: block; } 
.icon.override:hover span { display: block; }