Question

我使用Angular创建了一个show和function。目前我已经掌握了基础知识。当用户将鼠标悬停在图块上时，会添加并删除该类。

LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True

我想在整个网站上多次使用此节目和隐藏功能。当我将鼠标悬停在其中一个元素上时，它会将isActive类添加到所有元素而不是单独添加。

角度代码

<article class="col-sm-6" ng-mouseenter="showHiddenTile()" ng-mouseleave="hideHiddenTile()">                
    <div class="grid-block--img">
        <img src="/assets/homepage/home-tile5.png">
        <div class="grid-headings">
            <h2>a new<br/>home for<br/>whiskey</h2>
            <p><span class="heading--bold">WORK.</b><span>&nbsp;Food and Beverage Design<
        </div>
        <div class="grid-block-hidden" ng-class="{isVisble: tileBlock}">My overlay</div>
   </div>
</article>

如何单独定位isVisble类？

Answer 1

有阵列

$scope.array = [];

在mouseenter事件

时将其推送到数组

function showMethod(element){
    $scope.array.push(element);
}

当mouseleave事件

时将其从数组中切片

function hideMethod(element){
    $scope.array.slice($scope.array.indexOf(element),1);    
}

在ng-class中使用此条件

ng-class="array['blockName'] != -1"

Answer 2

您可以执行以下操作：

<article class="col-sm-6" ng-mouseenter="showHiddenTile('block-id')" ng-mouseleave="hideHiddenTile('block-id')">

并且：

   $scope.showHiddenTile = function(blockId) {
     $scope.tileBlock[blockId] = true;
    }

   $scope.hideHiddenTile = function(blockId) {
    $scope.tileBlock[blockId] = false;
   }

   $scope.isShowTitle = function(blockId) {
    return $scope.tileBlock[blockId];
   }

和

<div class="grid-block-hidden" ng-class="{isVisble: isShowTitle('block-id'}">My overlay</div>

然后每篇文章都有一个唯一的块ID。

Answer 3

为什么没有2种风格

.grid-block-hidden{
    //style when mouse is not on 
}

grid-block-hidden:hover{
   //style on hover  
   //isVisble class
}

角度显示和隐藏功能

3 个答案: