![](/img/trans.png)
[英]How to add/remove class on one element when hovering over a separate element?
[英]How to add and remove class of one element while hovering over another element via Angular?
我想在<li>
的子<a>
悬停时添加一个类,但我似乎无法使其正常工作。 发生的事情是,无论将鼠标悬停在哪个<a>
元素上,只有第一个<li>
都会受到影响,因此我只需要定位当前悬停的<a>
的父<li>
。
这是我到目前为止的内容:
这是代码:
控制器 (JavaScript)
var myApp = angular.module('myApp',[]);
myApp.controller("Ctrl", function($scope){
$scope.addClass = function(){
angular.element(document.querySelector('.li-hover')).addClass('hovering');
}
$scope.removeClass = function(){
angular.element(document.querySelector('.li-hover')).removeClass('hovering');
}
});
HTML
<div ng-app='myApp'>
<div ng-controller="Ctrl">
<ul>
<li class="li-hover" >
<a href="" ng-mouseover="addClass()" ng-mouseleave="removeClass()">
<span>Home</span>
</a>
</li>
<li class="li-hover" >
<a href="" ng-mouseover="addClass()" ng-mouseleave="removeClass()">
<span>About</span>
</a>
</li>
<li class="li-hover" >
<a href="" ng-mouseover="addClass()" ng-mouseleave="removeClass()">
<span>Contact</span>
</a>
</li>
</ul>
</div>
</div>
CSS
.hovering {
background-color: pink;
border-bottom: 5px solid red;
}
li {
margin: 1em;
padding: 2em;
border-bottom: 5px solid #aaa;
background: #ccc;
}
a {
background: white;
padding: 0.5em;
}
您可以使用转发器隔离作用域,并更改重复项的属性:
myApp.controller("Ctrl", function($scope) {
$scope.items = [
{
href: '',
title: 'Home',
},
{
href: '',
title: 'About',
},
{
href: '',
title: 'Contact',
}
];
});
然后,您可以将over属性存储在item
,并使用它来更改类:
<ul>
<li ng-repeat="item in items" ng-class="{hovering: item.over}">
<a ng-href="{{item.href}}" title="{{item.title}}" ng-mouseover="item.over=true" ng-mouseleave="item.over=false">
<span>{{item.title}}</span>
</a>
</li>
</ul>
或者您现在可以使用一个简单的var,因为ng-repeat
指令将每个项目隔离在新范围内:
<ul>
<li ng-repeat="item in items" ng-class="{hovering: over}">
<a ng-href="{{item.href}}" title="{{item.title}}" ng-mouseover="over=true" ng-mouseleave="over=false">
<span>{{item.title}}</span>
</a>
</li>
</ul>
我认为这样比较好,因为悬停时的样式是关注的问题。 尽管以上解决方案在当前作用域中设置了一个hover
属性,但控制器无需担心这一点。
您不需要任何js或jQuery代码,可以使用css :hover
选择器来完成此操作。 将此添加到您的CSS:
li:hover {
background-color: pink;
border-bottom: 5px solid red;
}
这是工作示例: http : //jsfiddle.net/faGTg/40/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.