Angularjs覆蓋ng-show ng-hide on：懸停

Question

我在模板中顯示了一系列“圖標”。

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

我有以下css來顯示.icon懸停並隱藏i時的span 。

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

但是，我還希望能夠在$scope.options == true時顯示每個span實例。 所以我添加了以下內容：

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

但是現在，我的:hover已經破碎，並且最終沒有顯示span 。

有沒有辦法覆蓋ng-show這樣我的css仍然會display:block它時是否display:block ？

Answer 1

plunker

您可以跳過css並使用ng-mouseenter / ng-mouseleave讓角度處理它。 然后在第二個變量成立時使用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; }