html - 使用 AngularJS 禁用以前悬停的效果

Question

我有以下带有 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 实现这一点？任何帮助将不胜感激。

Answer 1

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

See PLUNKER here.