Angularjs覆盖ng-show ng-hide on：悬停

[英]Angularjs Override ng-show ng-hide on :hover

本文翻译自 bryan 查看原文 2015/05/11 20175 css/ html/ angularjs/ javascript

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徘徊并隐藏我。

.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. So I added the following:

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

<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.

但是现在，我的：悬停被打破了，并没有最终显示跨度。

Is there a way to override the ng-show so that my css will still display:block when it is hovered?

有没有办法覆盖ng-show，这样我的css仍然会显示：阻塞它时是否阻塞？

2 个解决方案

#1

plunker

You can skip the css and let angular handle it using ng-mouseenter/ng-mouseleave. Then use an or to have it show when a second variable goes true.

您可以跳过css并使用ng-mouseenter / ng-mouseleave让角度处理它。然后在第二个变量成立时使用或显示它。

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

#2

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

智能推荐

注意！

本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2015/05/11/71d570dc39e1f0a576d7caabd21f31e3.html。

猜您在找

[Angularjs]ng-show和ng-hide ng-hide和ng-show with a counter angularJS - ng-hide and ng-show with a counter angularJS angularjs ng-if ng-show ng-hide区别 AngularJS: ng-show / ng-hide不使用“{}”插值 - AngularJS: ng-show / ng-hide not working with `{{ }}` interpolation AngularJS自定义指令ng-show / ng-hide - AngularJS custom directive ng-show/ng-hide

智能推荐