将翻转菜单添加到页面上的图像答案

【问题标题】：adding rollover menu to images on page将翻转菜单添加到页面上的图像
【发布时间】：2015-03-30 08:15:26
【问题描述】：

我有 3 张图片内联。它们存储在带有 imgAvatar 类的 span 标签中在它们上方有 3 个相同的图像（删除按钮菜单），它们从一开始就隐藏起来。这些存储在带有 imgAvatarSelector 类的 span 中。

删除按钮的 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有关。但是还是不明白到底是什么

【问题讨论】：

你能把它放在jsfiddle.net 中吗？帮助你会容易得多:)
最好避免 number="1" 将其设置为 data-number="1" 并通过 $(this).data('number') 在 jquery 中获取 id。
是的，在 js 中，它的工作正常。也许其他css规则在那里受到影响。需要显示完整的代码，然后调试受影响的人/地点会更容易？
我已经更新了问题，添加了影响 del 按钮的整个 css 屏幕，请看一下。
自己解决了问题。不需要这个问题。

标签： jquery css show-hide

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：