使用 AngularJS 禁用先前悬停的效果答案

【问题标题】：Disabling effects of previous hovers using AngularJS使用 AngularJS 禁用先前悬停的效果
【发布时间】：2014-04-07 21:40:41
【问题描述】：

我有下面的带有 AngularJS 的 HTML 代码

 <div class="row" style="margin-left:60px; text-align:center;">
     <div class="col-xs-1 "  style="margin-left:25px;width:10px; " ng-repeat="image_thumb_id in image_thumbnail_ids track by $index">
            <img class="border-hover-thumbnail" ng-src= "{{image_thumb_id}}"  alt="No Image" ng-mouseover="changeImage(image_thumb_id);" ng-mouseleave="myVar='my-class'" ng-class="myVar">
     </div>
 </div>

假设 5 个图像显示为缩略图，当我将鼠标悬停在图像 1 上时，悬停的图像上会显示一个边框，当我从该图像上取消悬停时，边框仍然存在，这很好。但是当我将鼠标悬停在另一个图像上时，图像 2，它周围有边框，当我悬停时边框仍然存在。我想要的是当我将鼠标悬停在 Image 2 上时，出现在 Image 1（悬停和取消悬停）上的边框应该消失。

遵循 CSS 代码。

.border-hover-thumbnail:hover
{
  /*box-shadow: 0px 0px 20px #FF7F50;*/
  position:static;
  border-color:#FF7F50 #FF7F50;
  border:2px solid gray;
}


.my-class 
{  
  /*box-shadow: 0px 0px 20px #FF7F50;*/
  position:static;
  border-color:#FF7F50 #FF7F50;
  border:2px solid gray;

}

如何使用 AngularJS 实现这一点？任何帮助将不胜感激。

【问题讨论】：

有没有地方可以看demo？您所要求的可以通过 jquery 完成，您是否有理由只希望它具有角度？
@ramesh : 很遗憾无法为您提供演示（在 localhost 上设置）。我在整个应用程序中一直在使用 AngularJS，并希望坚持下去。
看看这个：stackoverflow.com/questions/16923111/…。应该让你知道如何实现它。

标签： html css angularjs

【解决方案1】：

解决方案非常简单。首先，您使用 $scope 变量来保存当前悬停项目的 $index（如果没有则为 -1）。接下来是从 ng-mouseover 指令创建一个事件回调来更改列表中当前悬停的索引项。最后，通过创建函数调用来确定当前悬停的索引，使用 ng-class 指令设置边框或尝试添加到元素上的任何类型的 css 操作。

See PLUNKER here.

【讨论】：

谢谢，它有效。我在想类似的逻辑，但想不通。