Angularjs Override ng-show ng-hide on :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; }

但是，我还希望在$scope.options == true时显示span的每个实例。所以我添加了以下内容：

<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-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; }