web-dev-qa-db-ja.com

Angularjs：hoverでng-show ng-hideをオーバーライド

テンプレートに表示する一連の「アイコン」があります。

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

.iconがホバーされたときにspanを表示し、iを非表示にする次のCSSがあります。

.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になるようにする方法はありますか？

javascripthtmlcssangularjs
16
bryan

plunker

Cssをスキップして、ng-mouseenter/ng-mouseleaveを使用してangularを処理します。2番目の変数がtrueになったときに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
42
tpie

使用 $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; }
2
Jeff Clarke