覆蓋縮略圖和刪除圖像按鈕？

Question

我需要創建一個刪除按鈕，出現在我的拇指上，當用戶用鼠標懸停該圖像時，鏈接會顯示爲從收藏夾中刪除？

任何人都知道如何做到這一點？

我想要的一個例子就是通過視頻縮略圖找到的YouTube快速列表按鈕。

http://i50.tinypic.com/fxdu2b.jpg

Answer 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> 

Booya！

Answer 2

您可以使用下面的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> 

Answer 3

<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(); 
} 

Answer 4

從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。