Javascript Angularjs 在 :hover 上覆盖 ng-show ng-hide
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30172013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs Override ng-show ng-hide on :hover
提问by bryan
I have a series of "icons" that I show in my template.
我在模板中显示了一系列“图标”。
<div ng-repeat="data in items | orderBy:'-timestamp'">
<div class="icon">
<i>1</i>
<span>2</span>
</div>
</div>
I have the following css to show spanwhen .iconis hovered over and hide i.
我有以下的CSS展现span在.icon悬停和隐藏i。
.icon:hover i { display: none; }
.icon:hover span { display: block; }
However, I also want to be able to show every single instance of spanwhen $scope.options == true. So I added the following:
但是，我也希望能够显示spanwhen 的每个实例$scope.options == true。所以我添加了以下内容：
<i ng-hide="options">1</i>
<span ng-show="options">2</span>
But now, my :hoveris broken and doesn't end up showing the span.
但是现在，我:hover的坏了，最终没有显示span.
Is there a way to override the ng-showso that my css will still display:blockwhen it is hovered?
有没有办法覆盖 ，ng-show以便我的 cssdisplay:block在悬停时仍然存在？
回答by tpie
You can skip the css and let angular handle it using ng-mouseenter/ng-mouseleave. Then use an orto have it show when a second variable goes true.
您可以跳过 css 并让 angular 使用 ng-mouseenter/ng-mouseleave 处理它。然后使用 anor让它显示第二个变量何时变为真。
HTML:
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
回答by Jeff Clarke
use the $scope.optionsvalue to add a class to your .icondiv, then make a more specific CSS rule to overrride the :hoverevent.
使用该$scope.options值向您的.icondiv添加一个类，然后制定更具体的 CSS 规则来覆盖该:hover事件。
<div class="icon" ng-class="{ override: $scope.options == true }">
<i ng-hide="options">1</i>
<span ng-show="options">2</span>
</div>
And in your CSS:
在你的 CSS 中：
.icon.override:hover i { display: block; }
.icon.override:hover span { display: block; }
