ng-mouseover 到 select 只有悬停的元素而不是所有元素 - 使用 ng-repeat

Question

我需要在鼠标悬停时向元素添加和删除 class。下面的方法在所有具有 classname .blogOverlay 和 .newOverlay 的元素中添加和删除 classes。

我只需要在鼠标悬停的元素上 add/remove class。

JS:

$scope.showReadMore = function(){
  $('.blogOverlay').addClass("hidden");
  $('.newOverlay').removeClass('hidden');
}
$scope.hideReadmore = function(){
  $('.blogOverlay').removeClass("hidden");
  $('.newOverlay').addClass('hidden');
}

HTML:

  <div ng-if="!post.firstFeatured" class="col-sm-10 blog-content blogPreview" >
                            <a ng-click="goToPostDetail(post, $index)" >
                              <img class="img-responsive img-blog" ng-src="{{ post.fields.image.fields.file.url }}" width="100%" alt=""  />
                              <div class="blogOverlay" ng-mouseover="showReadMore()" ng-mouseleave="hideReadmore()">
                                  <h2>{{ post.fields.title }}</h2>
                              </div>

                              <div class="newOverlay hidden" ng-mouseover="showReadMore()" ng-mouseleave="hideReadmore()">
                                  <h2>{{ post.fields.title }}</h2>
                                  <h3>{{post.fields.date}}</h3>
                                  <a class="btn btn-primary readmore" ng-click="goToPostDetail(post, $index)">Read More</a>
                              </div>
                            </a>
                        </div>

Answer 1

给class起个像class="blogOverlay_{{$index}}"这样的名字然后把$index传给JavaScript像showReadMore($index)

这样你的 class 名字是独一无二的，它们只会为 index 你想改变的名字而改变

Answer 2

你不需要太复杂查看下面的内容 css 和 live plunker

.blue{
  
  background-color:blue;
}
.red{
  
  background-color:red;
}
.blue:hover
{
  
  background-color:yellow;
  visibility:hidden
}

PLUNKER DEMO

更新 1：隐藏和显示

Answer 3

不需要使用jquery。只需使用 ng-class 并添加一个条件来显示或隐藏 class 到您的 post。根据属性 post.readMore 在控制器

中，Se 用隐藏的 class 截断了内容是如何显示或隐藏的

angular.module('myapp', [])
  .controller('foo', function($scope) {

    $scope.post = {
      readMore: true,
      fields: {
        title: 'The post title',
        date: new Date()
      }
    }

    $scope.showReadMore = function(post) {
      post.readMore = true;
    }
    $scope.hideReadmore = function(post) {
      post.readMore = false;
    }


  });

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <style type="text/css">
    .hidden {
      display: none;
    }
  </style>

</head>

<body ng-app="myapp">
  <div ng-controller="foo">

    <div ng-if="!post.firstFeatured" class="col-sm-10 blog-content blogPreview" style="max-width: 400px">
      <a ng-click="goToPostDetail(post, $index)">
        <img class="img-responsive img-blog" ng-src="{{ post.fields.image.fields.file.url }}" width="100%" alt="" />

        <div class="blogOverlay" ng-class="{'hidden' : !post.readMore}" ng-mouseover="showReadMore(post)" ng-mouseleave="hideReadmore(post)">
          <h2>{{ post.fields.title }}</h2>
        </div>

        <div class="newOverlay" ng-class="{'hidden' : post.readMore}" ng-mouseleave="showReadMore(post)" ng-mouseover="hideReadmore(post)">
          <h2>{{ post.fields.title }}</h2>
          <h3>{{post.fields.date}}</h3>
          <a class="btn btn-primary readmore" ng-click="goToPostDetail(post, $index)">Read More</a>
        </div>

      </a>
    </div>

  </div>


</body>

</html>

ng-mouseover 到 select 只有悬停的元素而不是所有元素 - 使用 ng-repeat

ng-mousover to select ONLY the hovered element not all elements - using ng-repeat

mouseover

onmouseover

angularjs

angularjs-ng-repeat