使用 Angular 在悬停时同时更改多个元素组的样式

Question

我发现当这些元素之一悬停时，我自己需要更改具有共同属性（比如 class 名称）的所有元素的样式。使用 jQuery 非常容易做到，像这样：

$(function() {
   $('.bookId4').hover( function(){
      $(this).css('background-color', '#F00');
   },
   function(){
      $(this).css('background-color', '#000');
   });
});

虽然我不知道如何用 Angular 实现这一点。在此示例中，具有 class .bookId4 的元素是通过 Angular AJAX 调用生成的，因此我想使用 Angular 来创建悬停效果也一样。谢谢！

编辑

为了进一步解释，我将通过 AJAX 调用生成许多 div，并且同一组中的 div 将具有相同的 class。这是 HTML 代码：

<div class="bookId{{ privateTour.booking.id }}"> <!-- Wrapper for hover effect -->

当悬停其中一个 div 时，我希望所有 div（不仅是悬停的 div）具有相同的 class （或它们可能具有的一些其他共同点）产生悬停效果。我的首选方法是让 Angular 在整个页面中搜索具有特定 class 名称的所有 div 并为该 class 应用样式（不必示例为生成的所有 classes 生成大量 CSS，我什至不确定它是否有效。

Answer 1

您可以应用简单的 css 悬停解决方案，例如

.bookId4:hover {
    background-color: '#F00';
}

不需要 angular 或 jQuery :-)

Answer 2

您可以通过使用 ng-mouseenter 和 ng-mouseleave 指令来做到这一点，这是简单的代码，您可以在此基础上构建以满足您的要求

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example73-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  

  
</head>
<body ng-app="">
<h1 ng-style="myStyle" ng-mouseenter="myStyle={'background-color':'blue'}"" ng-mouseleave="myStyle={'background-color':'none'}"">Hello World</h1>
</body>
</html>

Answer 3

是的，我同意使用 ng-mouseenter 和 ng-mouseleave。我做了一个例子希望能帮到你

https://embed.plnkr.co/Cxfv0I9IEfBhZYj8A3zS/

Answer 4

use ng-class, create one scope variable which is by default false. when mouseEnter OR mouseLeave event occurs make it TRUE/False accordingly.

<style>
    .bookId4{color: red;}
</style>        
<span  ng-mouseenter="ctrl.hovered()" ng-mouseout="ctrl.nothovered()"  ng-class="{ 'bookId4' : ctrl.ishovered==true }">soemthing 1</span>
        <span  ng-mouseenter="ctrl.hovered()" ng-mouseout="ctrl.nothovered()" ng-class="{ 'bookId4' : ctrl.ishovered==true }">soemthing 2</span>
        <span  ng-mouseenter="ctrl.hovered()" ng-mouseout="ctrl.nothovered()" ng-class="{ 'bookId4' : ctrl.ishovered==true }">soemthing 3</span>

            _this.ishovered =false;    
            _this.hovered = function(){
                _this.ishovered =true;
            }
            _this.nothovered = function(){
                _this.ishovered =false;
            }

Answer 5

最后我发现使用 ng-class 条件是最好的解决方案，一个变量决定应该突出显示哪个组。我最初尝试使用的这一行无法正常工作：

<div ng-class="hovering == privateTour.booking.id ? 'hl' : ''" ng-mouseenter="hovering = privateTour.booking.id" ng-mouseleave="hovering = 0"> <!-- Wrapper for hover effect -->

出于某种原因，只有悬停的 div 突出显示，因此我不得不使用函数将信号发送到变量，而不是让它具有全局效果。我最终将此代码用于 div 包装器：

<div ng-class="hovering == privateTour.booking.id ? 'hl' : ''" ng-mouseenter="setHover(privateTour.booking.id)" ng-mouseleave="setHover(0)"> <!-- Wrapper for hover effect -->

我在范围内写了这个简单的函数：

$scope.setHover = function(bookId) {
    $scope.hovering = bookId;
};

下面是突出显示的样式 class .hl:

.hl {
background-color: red;
}

感谢大家带领 ng-mouseenter 和 ng-mouseleave！

使用 Angular 在悬停时同时更改多个元素组的样式

Change style of multiple element groups simultaneously on hover using Angular

javascript

css

hover

angularjs