Angularjs 覆盖 ng-show ng-hide on :hover答案

【问题标题】：Angularjs Override ng-show ng-hide on :hoverAngularjs 覆盖 ng-show ng-hide on :hover
【发布时间】：2015-07-22 05:07:54
【问题描述】：

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

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

当.icon 悬停在上面并隐藏i 时，我有以下css 来显示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？

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

plunker

您可以跳过 css 并让 angular 使用 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

【讨论】：

可靠的解决方法。感谢这一点，比更改样式以使用!important 要好得多
可爱的答案@tpie

【解决方案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; }

【讨论】：