Javascript 有人能帮我用angularjs的ng mouseover和ng mouseleave吗？

我的html中有如下代码：

<div ng-mouseover="show_up()" ng-mouseleave="dont_show_up()" class="contain">
    <img src="image/first_image.jpg">
    <div class="overlay" ng-style="overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>
<div ng-mouseover="show_up()" ng-mouseleave="dont_show_up()" class="contain">
    <img  src="image/second_image.jpg">
    <div class="overlay" ng-style="overlay">
        <a href="#!" class="text">show songs</a>
    </div>
</div>

这就是我需要做的：每当我在我的第一张图片上悬停时，它应该添加样式“高度：100%” 为了我的第一个形象，不是他们两个！ 当我将鼠标悬停在第二张图像上时，它应该添加样式“height:100%” 为了我的第二个形象，不是他们两个！

---

如何解决此问题？

一个解决方案是将一些值传递给

show\u up（）

和

dont\u show\u up（）

函数，该函数标识图像，例如1、2，然后在函数内部将

overlay

变量更改为数组并更新相应的项

ng style=“overlays”

也必须更改为

ng style=“overlays[0]”

--编辑

$scope.show\u up=函数（索引）{
$scope.overlays[索引]={
“高度”：“100%”
};
};
$scope.dont\u show\u up=函数（索引）{
$scope.overlays[索引]={
“高度”：“0”
};
}

当图像数量增加时，很难维护

第二种解决方案。 您可以将所有图像存储为对象数组，并应用

ng repeat

指令在其中循环

$scope.show\u up=函数（id）{
$scope.images.find（image=>image.id==id）。覆盖={
“高度”：“100%”
};
};
$scope.dont\u show\u up=函数（id）{
$scope.images.find（image=>image.id==id）。覆盖={
“高度”：“0”
};
}

由于您声明希望图像在鼠标上方从0%更改到100%，因此不确定您想要实现什么，但ng样式应用于覆盖。我想你是想把文字覆盖在图像上

无论如何，你不需要angular，甚至不需要javascript，只需要CSS，在父级上应用：hover，在子元素上应用样式，你就可以在不需要js的情况下获得想要的结果

.overlay{
身高：0；
溢出：隐藏
}
.contain:悬停.覆盖{
身高：100%；
}

谢谢你的回答，我已经尝试了第二种解决方案，效果非常好，但是你能解释一下第一种吗？我没有完全理解你的意思。我不知道为什么，但第一个解决方案不起作用！为什么我要将“overlay”类更改为“overlays”。因为我正在尝试将“overlay”属性之一的“height”从“0”更改为“100%”。您必须将

overlay

变量名更改为

overlays

，它应该是一个对象数组[{“height”：“0”}，{“height”：“0”}谢谢，你说的完全正确。我试图在我的图片上覆盖一些文字。因为我是angularjs的新手，而且我最近正在做这件事，我只想用angularjs来做！！

$scope.show_up = function () {
       $scope.overlay={
           "height":"100%"
       };
    };
    $scope.dont_show_up = function () {
        $scope.overlay={
            "height":"0"
        };
    }