答案 0 :(得分:7)
当您将鼠标悬停在缩略图上时会显示图标,当您将图标悬停在其上时,它将变为悬停图标。
.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!
答案 1 :(得分:3)
从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。
答案 2 :(得分:1)
您可以使用以下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>
答案 3 :(得分:0)
<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();
}