Hình thu nhỏ lớp phủ có nút xóa hình ảnh?

Question

Tôi cần tạo nút xóa xuất hiện trên ngón cái khi người dùng di chuột lên hình ảnh đó bằng liên kết của mình xuất hiện như xóa khỏi mục yêu thích?

Bất kỳ ai biết cách đạt được điều này?

Ví dụ về những gì tôi muốn là nút danh sách nhanh youtube mà bạn tìm thấy trên các ngón tay cái video.

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

Answer 1

Điều này sẽ hiển thị biểu tượng khi bạn di chuột qua hình thu nhỏ và khi bạn di chuột lên biểu tượng trên đầu trang đó, biểu tượng sẽ thay đổi thành biểu tượng di chuột.

.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

Bạn có thể sử dụng sau đây CSS theo kiểu <div> để đạt được điều này trong CSS tinh khiết:

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

Modified từ Daniel Vassallo's câu trả lời ban đầu:

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 (giả sử rằng nó được tạo ra):

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

Chỉnh sửa: đơn giản hóa HTML.