Question

当发现其中一个元素悬停时，我发现自己需要更改具有共同属性的所有元素的样式（比如一个类名）。使用jQuery非常容易，例如：

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

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

修改

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

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

当其中一个div被徘徊时，我希望所有div（不仅是正在徘徊的div）具有相同的类（或者它们可能具有的其他一些共同值）以产生悬停效果。我首选的方法是让Angular在整个页面中搜索具有特定类名的所有div，并将样式应用于该类（例如，不必为生成的所有类生成大量的CSS，我就是甚至不确定它会起作用。）

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

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

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

不需要角度或jQuery： - ）

Answer 3

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

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

Answer 4

使用ng-class，创建一个默认为false的范围变量。当mouseEnter或mouseLeave事件发生时，将其设置为TRUE / False。

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

这是高亮课程的风格.hl：

.hl {
background-color: red;
}

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

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

5 个答案: