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周围有边框，当我解开边框时，它仍然存在。我想要的是当我将鼠标悬停在图像2上时，图像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.

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

1 个答案: