向页面上的图像添加翻转菜单

Question

我有3个内嵌图像。它们存储在带有imgAvatar类的span标签中 在它们上面有3个相同的图像（删除按钮菜单），它们从头开始隐藏。 这些存储在与imgAvatarSelector类的跨度中。

删除按钮的Css

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

HTML

<div id="Line1">
            <span id="imgAvatarSelector1" number="1" class="imgAvatarSelector"><img id="imgAvatarDel1" number="1" class="imgAvatarDelButtons " src="/img/del-50.png" style="display: none;"><span id="imgAvatar1" number="1" class="imgAvatar"><img src="/files/test1/178131u7r-240.jpg"></span></span>
            <span id="imgAvatarSelector2" number="2" class="imgAvatarSelector"><img id="imgAvatarDel2" number="2" class="imgAvatarDelButtons " src="/img/del-50.png" style="display: none;"><span id="imgAvatar2" number="2" class="imgAvatar"><img src="/files/test1/1de726eii-240.jpg"></span></span>
            <span id="imgAvatarSelector3" number="3" class="imgAvatarSelector"><img id="imgAvatarDel3" number="3" class="imgAvatarDelButtons " src="/img/del-50.png" style="display: none;"><span id="imgAvatar3" number="3" class="imgAvatar"><img src="/files/test1/z5fdaz034-240.jpg"></span></span>
        </div>

显示和隐藏删除按钮的脚本

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

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

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

现在，当我将鼠标翻转过图像​​时，首次在图像上方正确显示所有删除按钮。然后在mouseOUT之后隐藏它们。但是下次翻转它们时，只有第一个正确显示相同的位置。第二个和第三个删除按钮显示在左侧开始的整行此图像下方。

要在CSS中修复还是使用不同的jquery函数？

更新 在JSFidle中我的例子工作正常。 但在我的应用程序中，有些不同。第二个del按钮就像它想要成为div并从新行开始。 http://jsfiddle.net/vasuydwh/

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

更新3

实际上我在3个div中有3条线。并且每行第一个del按钮只能正常工作。其他人往往出现在下一行。所以它可能与div有关。但仍然无法理解究竟是什么

Answer 1

我会使用css而不是javascript来显示删除按钮。 你需要做的就是删除所有显示“删除按钮”的js，添加这个css并测试它。

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

Answer 2

您可以使用css选择器来完成此操作，完全不需要jQuery：

#Line1 {
  height: 300px;
  width: 300px;
  background: url(http://placekitten.com/g/300/300);
  position: relative;
}
#Line1 span {
  opacity: 0;
  transition: all 0.6s;
}
#Line1:hover span {
  opacity: 1;
}

<div id="Line1">
  <span id="imgAvatarSelector1" number="1" class="imgAvatarSelector"><img id="imgAvatarDel1" number="1" class="imgAvatarDelButtons " src="/img/del-50.png" style="display: none;"><span id="imgAvatar1" number="1" class="imgAvatar"><img src="/files/test1/178131u7r-240.jpg"></span></span>
  <span id="imgAvatarSelector2" number="2" class="imgAvatarSelector"><img id="imgAvatarDel2" number="2" class="imgAvatarDelButtons " src="/img/del-50.png" style="display: none;"><span id="imgAvatar2" number="2" class="imgAvatar"><img src="/files/test1/1de726eii-240.jpg"></span></span>
  <span id="imgAvatarSelector3" number="3" class="imgAvatarSelector"><img id="imgAvatarDel3" number="3" class="imgAvatarDelButtons " src="/img/del-50.png" style="display: none;"><span id="imgAvatar3" number="3" class="imgAvatar"><img src="/files/test1/z5fdaz034-240.jpg"></span></span>
</div>