如何通过 Angular 将鼠标悬停在另一个元素上时添加和删除一个元素的 class？

Question

我想在 child <a> 悬停时将 class 添加到 <li>，但我似乎无法让它工作.发生的事情是，无论将 <a> 元素悬停在什么上，只有第一个 <li> 会受到影响，所以我需要能够仅针对 parent <li> <a> 当前悬停在上面。

这是我目前的情况：

http://jsfiddle.net/faGTg/39/

这是代码：

控制器 (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;
}

Answer 1

您不需要任何 js 或 jQuery 代码，您可以使用 css :hover 选择器完成此操作。将此添加到您的 css:

li:hover {
   background-color: pink;
   border-bottom: 5px solid red;
}

这是工作示例：http://jsfiddle.net/faGTg/40/

Answer 2

您可以使用中继器隔离范围，并更改重复项的属性：

myApp.controller("Ctrl", function($scope) {
  $scope.items = [
    {
      href: '',
      title: 'Home',
    },
    {
      href: '',
      title: 'About',
    },
    {
      href: '',
      title: 'Contact',
    }
  ];
});

然后，你可以在item上存储一个超过属性，并用它来改变class：

<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>

http://jsfiddle.net/faGTg/41/

或者您现在可以为此使用一个简单的 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属性，但是controller不需要关心这个

http://jsfiddle.net/33ypvx3g/

如何通过 Angular 将鼠标悬停在另一个元素上时添加和删除一个元素的 class？

How to add and remove class of one element while hovering over another element via Angular?

javascript

css

jquery

angularjs

angularjs-scope