使用删除图像按钮覆盖缩略图？答案

【问题标题】：Overlay thumbnail with remove image button?使用删除图像按钮覆盖缩略图？
【发布时间】：2009-12-15 19:39:59
【问题描述】：

我需要创建一个删除按钮，当用户将鼠标悬停在该图像上时，该按钮会出现在我的拇指上，链接看起来像是从收藏夹中删除？

有人知道如何实现吗？

我想要的一个例子是你在视频拇指上找到的 youtube 快速列表按钮。

【问题讨论】：

你在用jQuery之类的东西吗？
是的，我使用 jquery .. 请注意，这将应用于同一页面上的不同拇指 .. 所以在 css 中将 bg 图像作为拇指将不起作用.. 谢谢大家
谢谢大家，我现在正在测试所有解决方案，并将尽快更新最佳答案..
问题已通过 Tor Valamo 解决方案解决 .. 感谢所有帮助我的人

标签： javascript css image html overlay

【解决方案1】：

这将在您悬停缩略图时显示图标，当您将图标悬停在缩略图上方时，它将变为悬停图标。

.image-thumb, .image-thumb img {
  position:relative;
  width:60px;
  height:50px;
}
.image-fav {
  display:none;
  position:absolute;
  bottom:0;
  left:0;
  width:15px;
  height:15px;
  background-image:url(normal_plus.png);
}
.image-thumb:hover .image-fav {
  display:block;
}
.image-fav:hover {
  background-image:url(hover_plus.png);
}

<div class="image-thumb">
  <img src="thumb.jpg" />
  <a href="#" class="image-fav"></a>
</div>

嘘！

【讨论】：

我对 css 有点困惑。将 .image-fav 设置为绝对位置，底部和左侧设置为 0 是否意味着关闭按钮将设置到 html 页面的底部？

【解决方案2】：

修改自Daniel Vassallo's原答案：

CSS：

.image-thumb { 
    position: relative; 
    width: 100px;
    height: 100px; 
    /* apply background-image url inline on the element since it is part of the content */
    background: transparent url() no-repeat center center;
}

.image-thumb a { 
    display: none;
    position: absolute; 
    top: 80px;  /* position in bottom right corner, assuming image is 16x16 */
    left: 84px; 
    width: 16px; 
    height: 16px; 
    background: transparent url(remove_button.gif) no-repeat 0 0;
}   

.image-thumb:hover a { 
    display: block;
}

HTML（假设是生成的）：

<div class="image-thumb" id="some-unique-thumb-id-1" style="background-image: url(some/image-1.ext)">
    <a href="#"></a>
</div>
<div class="image-thumb" id="some-unique-thumb-id-2" style="background-image: url(some/image-2.ext)">
    <a href="#"></a>
</div>
....
<div class="image-thumb" id="some-unique-thumb-id-n" style="background-image: url(some/image-n.ext)">
    <a href="#"></a>
</div>

JavaScript：

$(function() {
    $(".image-thumb a").click(function(e) {
        e.preventDefault();
        var imageId = $(this).parent().attr("id");
        // remove image based on ID.
    });
});

编辑：简化 HTML。

【讨论】：

【解决方案3】：

您可以使用以下 CSS 样式的 <div> 在纯 CSS 中实现此目的：

CSS：

.image-thumb { 
    position: relative; 

    width:  100px;
    height: 100px; 

    background-image: url(image_thumb.jpg); 
}

.image-fav { 
    position: absolute; 

    top:    0px; 
    left:   0px; 
    width:  20px;
    height: 20px;

    background-image: url(fav_icon.png); 
    background-position: bottom left; 

    display: none;
}   

.image-fav:hover {
    display: block;
}

HTML：

<div class="image-thumb">
    <a class="image-fav" href="javascript:removeFromFav();"></a>
</div>

【讨论】：

.image-fav {display:none} .image-thumb:hover .image-fav {display:block;} 可能更像他要找的东西。
我在另一个答案中进一步改进了它：P
@Tor：不只是你——每个人都在扩展它:) ...至少我提供了一些灵感:)

【解决方案4】：

<div id = "thumbImg">
     <img src="thumb.png" onMouseOver="overlayRemove();" 
       onMouseOut="hideRemove();" />
     <img id='removeImg' src='remove.png' 
     style='position:relative;left:0px;top:0px;z-index:2;display:none' />
</div>

javaScript：

function overlayPic(){
   $('removeImg').show();
}
function hideRemove(){
   $('removeImg').fadeOut();
}

【讨论】：

这里使用的 JavaScript 是......顽皮。尤其是如果您使用 jQuery，没有理由直接在 HTML 中附加 JavaScript 事件回调，事实上，这是一种不好的做法。