Question

我需要在鼠标悬停时向一个元素添加和删除一个类。下面的方法使用classname .blogOverlay和.newOverlay添加和删除所有元素的类。

我需要它来添加/删除正在悬停的元素上的类。

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

无需使用jquery。只需使用 ng-class 并添加条件即可在帖子中显示或隐藏该类。 Se根据控制器中的属性cdo merge hgt_1000.nc hgt_925.nc out.nc剪断了隐藏类的显示或隐藏内容的方式

post.readMore

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

Answer 2

将类名称设为class="blogOverlay_{{$index}}"，然后将$index传递给JavaScript，如showReadMore($index)

这种方式您的班级名称是唯一的，只会更改为您想要更改的index

Answer 3

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

.blue{

  background-color:blue;
}
.red{

  background-color:red;
}
.blue:hover
{

  background-color:yellow;
  visibility:hidden
}

PLUNKER DEMO

更新1：隐藏并显示

ng-mousover只选择悬停元素而不是所有元素 - 使用ng-repeat

3 个答案: