jquery - 将鼠标悬停菜单添加到页面上的图像

Question

我有 3 个内联图像。它们存储在带有 imgAvatar 类的 span 标签中在它们上方有 3 个相同的图像(删除按钮菜单)，它们从一开始就被隐藏了。这些存储在具有 imgAvatarSelector 类的跨度中。

删除按钮的样式

.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

我会使用 javascript 的 css 来显示删除按钮。您需要做的就是删除所有用于显示“删除按钮”的 js，添加此 css 并进行测试。

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