[英]Angularjs Override ng-show ng-hide on :hover
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 span
when .icon
is hovered over and hide i
. 我有以下css来显示.icon
悬停并隐藏i
时的span
。
.icon:hover i { display: none; }
.icon:hover span { display: block; }
However, I also want to be able to show every single instance of span
when $scope.options == true
. 但是,我还希望能够在$scope.options == true
时显示每个span
实例。 So I added the following: 所以我添加了以下内容:
<i ng-hide="options">1</i>
<span ng-show="options">2</span>
But now, my :hover
is broken and doesn't end up showing the span
. 但是现在,我的:hover
已经破碎,并且最终没有显示span
。
Is there a way to override the ng-show
so that my css will still display:block
when it is hovered? 有没有办法覆盖ng-show
这样我的css仍然会display:block
它时是否display:block
?
You can skip the css and let angular handle it using ng-mouseenter/ng-mouseleave. 您可以跳过css并使用ng-mouseenter / ng-mouseleave让角度处理它。 Then use an or
to have it show when a second variable goes true. 然后在第二个变量成立时使用or
显示它。
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
use the $scope.options
value to add a class to your .icon
div, then make a more specific CSS rule to overrride the :hover
event. 使用$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>
And in your CSS: 在你的CSS中:
.icon.override:hover i { display: block; }
.icon.override:hover span { display: block; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.