Jquery 向页面上的图像添加滚动菜单

我有3张图片。它们存储在类为imgAvatar的span标记中 在它们上面有3个相同的图像（删除按钮菜单），从一开始就被隐藏。 它们存储在具有imgAvatarSelector类的跨距中

删除按钮的Css

.imgAvatarDelButtons {
    display: none;
  /*  height:50px; */
    position: absolute;
    float: right;
}

HTML

现在，当我将鼠标悬停在图像上时，第一次所有的删除按钮都正确地显示在图像上方。然后在老鼠出没后，它们就藏起来了。但下次翻滚它们时，只有第一个会正确地显示回相同的位置。第二个和第三个删除按钮显示在左开始的整行图像下方

有什么需要在CSS中修复或使用不同的jquery函数的吗

更新 在JSIDLE中，我的示例工作正常。 但在我的应用程序中有些不同。第二个del按钮表现得像是div，从新行开始。

更新2 下面是影响del按钮的整个css

更新3

---

事实上，我有3行在3个分区。并且每行第一个del按钮只能正常工作。其他人往往出现在下一行。所以很可能是和div有关。但是仍然无法理解我将使用css而不是javascript来显示删除按钮的确切内容。 您所需要做的就是删除显示“删除按钮”的所有js，添加此css并测试它

.imgAvatarSelector:hover .imgAvatarDelButtons{
    display: block; /*OR inline, inline-block*/
}

---

您可以使用css选择器来实现这一点，完全不需要jQuery：

#第1行{
高度：300px；
宽度：300px；
背景：url(http://placekitten.com/g/300/300);
位置：相对位置；
}
#1号线跨度{
不透明度：0；
过渡：均为0.6s；
}
#第1行：悬停跨度{
不透明度：1；
}

你能把这个放在一个盒子里吗？这将更容易帮助您：）最好避免

number=“1”

将其设置为

data number=“1”

，并通过

$在jquery中获取id（this）。数据（'number'）

。是的，在js中，它的工作很好。可能其他css规则也会受到影响。需要显示完整的代码，然后它将更容易调试谁/在哪里受影响？我已经更新了问题，添加了整个css的影响del按钮的屏幕，请看一看。修复了我自己的问题。没有必要问这个问题。

$('.imgAvatarSelector').mouseover(function() {

    $('#imgAvatarDel'+$(this).attr('number')).show();
});

$('.imgAvatarSelector').mouseout(function() {
    $('#imgAvatarDel'+$(this).attr('number')).hide();
});

.imgAvatarSelector:hover .imgAvatarDelButtons{
    display: block; /*OR inline, inline-block*/
}