Question

我有一系列＆＃34;图标＆＃34;我在模板中显示。

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

当span悬停在.icon并隐藏i时，我有以下css显示.icon:hover i { display: none; } .icon:hover span { display: block; }。

span

但是，我还希望能够在$scope.options == true时显示<i ng-hide="options">1</i> <span ng-show="options">2</span>的每个实例。所以我添加了以下内容：

:hover

但现在，我的span已被破坏，并且最终无法显示ng-show。

有没有办法覆盖display:block，以便我的css在徘徊时仍然会$z = $_GET["z"]; $link = mysql_connect("localhost","root",""); mysql_select_db("DBname",$link); function one(){ $result = mysql_query( " SELECT * FROM table1"); return $result; } function two(){ $result = mysql_query( " SELECT * FROM table2"); return $result; } $arr=array ('one'=>"one",'two'=>"two"); $result=$arr[$z](); while($end = mysql_fetch_assoc($result)) { echo $end["col1"]; echo $end["col2"]; echo $end["col3"]; } mysql_close($link);？

Answer 1

plunker

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

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

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

2 个答案: