我需要在鼠标悬停时向元素添加和删除类。下面的方法在类名为 .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>
没有必要使用 jquery。只需使用ng-class并添加一个条件即可在您的帖子中显示或隐藏该类。Se 根据控制器中的属性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;
}
});<!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>给类名类似于class="blogOverlay_{{$index}}"，然后像showReadMore($index)一样$index传递给JavaScript
这样，您的类名是唯一的，并且它们只会在您想要更改index更改时更改
你不需要太复杂 查看下面的css和实时plunker
.blue{
background-color:blue;
}
.red{
background-color:red;
}
.blue:hover
{
background-color:yellow;
visibility:hidden
}
普兰克演示
更新1：隐藏和显示