Angularjs ng鼠标悬停以仅选择悬停的元素而不是所有元素-使用ng repeat

我需要在mouseover上向元素添加和删除一个类。下面的方法从所有元素中添加和删除classname.blogOverlay和.newOverlay的类

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

JS:

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>

{{post.fields.title}
{{post.fields.title}
{{post.fields.date}
阅读更多

给类名指定类似于

class=“blogolavery{{{$index}}”

的名称，然后将

$index

传递给JavaScript，如

showReadMore（$index）

---

这样，您的类名是唯一的，它们只会在

索引中更改

您想要更改的您不需要太复杂，请查看下面的css和live plunker

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

---

更新1：隐藏和显示

无需使用jquery。只需使用ng class并添加一个条件即可在帖子中显示或隐藏该类。Se根据控制器中的属性

post.readMore

截取了隐藏类显示或隐藏内容的方式

angular.module（'myapp'，[]）
.controller（'foo'，函数（$scope）{
$scope.post={
里德莫尔：没错，
字段：{
标题：“帖子标题”，
日期：新日期（）
}
}
$scope.showReadMore=函数（post）{
post.readMore=true；
}
$scope.hideReadmore=函数（post）{
post.readMore=false；
}
});

.隐藏{
显示：无；
}
{{post.fields.title}
{{post.fields.title}
{{post.fields.date}
阅读更多
您似乎正在使用jquery？为什么会这样？@Aravind接受其他建议更新您的css类？请在下面检查我的答案。如果您需要更多帮助，请告诉我避免“blogOverlay{{{$index}}”影响已为blogOverlay准备好的css的最简单方法是什么您可以创建在css中没有关联样式的新类。只是为了得到那不确定的。添加然后将其用作jquery selectoe用于添加/删除隐藏类获取“unrecognized expression$index”我了解这是如何工作的，但我遇到的问题是添加和删除类。为什么要添加或删除类？我需要删除隐藏在div上的类以及需要显示的内容。并将隐藏的类添加到div中，其中包含我想要隐藏的内容。你的plunked正在改变背景颜色我建议你这样做，为什么要编写方法并在实际不需要jquery的时候使用它呢！！给我你的css样式。谢谢！！它起作用了。你介意解释一下'fields:{title:'the post title'，date:new date（）}'的用途吗？没有具体用途。只需填写这些属性，您就可以在代码中（在问题中）添加这些属性，让您有机会看到post的这些属性是如何在mouseover和mouseleave上显示和隐藏的：）
.blue{
  
  background-color:blue;
}
.red{
  
  background-color:red;
}
.blue:hover
{
  
  background-color:yellow;
  visibility:hidden
}