我需要创建一个删除按钮,出现在我的拇指上,当用户用鼠标悬停该图像时,链接会显示为从收藏夹中删除?覆盖缩略图和删除图像按钮?
任何人都知道如何做到这一点?
我想要的一个例子就是通过视频缩略图找到的YouTube快速列表按钮。
http://i50.tinypic.com/fxdu2b.jpg
我需要创建一个删除按钮,出现在我的拇指上,当用户用鼠标悬停该图像时,链接会显示为从收藏夹中删除?覆盖缩略图和删除图像按钮?
任何人都知道如何做到这一点?
我想要的一个例子就是通过视频缩略图找到的YouTube快速列表按钮。
http://i50.tinypic.com/fxdu2b.jpg
当您将鼠标悬停在缩略图上时,会显示图标,当您将图标悬停在该图标上方时,图标将变为悬停图标。
.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!
Booya是吧?你不说。 – 2009-12-15 20:03:30
我相信我刚刚做过,先生。 – 2009-12-15 20:04:27
wooow工作完美..非常感谢博雅....干杯:) – 2009-12-15 20:07:46
您可以使用下面的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; }可能更像他正在寻找的东西。 – 2009-12-15 19:55:22
@Tor,是的好主意。我修改了我的答案。 – 2009-12-15 19:58:59
我改进了更多的另一个答案:P – 2009-12-15 20:00:52
<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事件回调,事实上,这是一种不好的做法。 – 2009-12-15 20:00:11
从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。
是的,比我的好:) – 2009-12-15 20:05:28
+1为改进扩展 – 2009-12-15 20:08:17
感谢您的帮助 – 2009-12-15 20:30:16
你使用类似jQuery的东西吗? – Aly 2009-12-15 19:42:53
是的,我使用jquery ..请注意,这将适用于不同的拇指在同一页..所以坐在bg图像拇指在CSS中将无法正常工作..谢谢大家 – 2009-12-15 19:47:18
谢谢大家我现在正在测试所有解决方案并将尽快与最好的答案更新.. – 2009-12-15 20:05:46