Javascript Angularjs覆盖ng显示ng隐藏打开：悬停

我在模板中显示了一系列“图标”

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

但是，我还希望能够在

$scope.options==true

时显示

span

的每个实例。因此，我添加了以下内容：

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

1
2.

但是现在，我的

：hover

被破坏，并且没有显示

span

---

是否有方法覆盖

ng show

，使我的css在悬停时仍能显示

block

？

使用

$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，让angular使用ng mouseenter/ng mouseleave处理它。然后使用

或

在第二个变量变为真时显示它

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

1.
2.
显示

扎实的工作。谢谢，这比将样式更改为使用

要好得多！重要提示

可爱的回答@tpie

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

<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