首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >是否使用删除图像按钮覆盖缩略图?

是否使用删除图像按钮覆盖缩略图?
EN

Stack Overflow用户
提问于 2009-12-16 03:39:59
回答 3查看 10.6K关注 0票数 5

我需要创建一个删除按钮出现在我的拇指上,当用户用他的鼠标悬停图像时,一个链接出现,如从收藏夹中删除?

有人知道如何做到这一点吗?

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

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2009-12-16 04:00:29

这将在您悬停缩略图时显示图标,当您将图标悬停在缩略图顶部时,它将更改为悬停图标。

代码语言:javascript
复制
.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>

太棒了!

票数 7
EN

Stack Overflow用户

发布于 2009-12-16 03:57:10

Daniel Vassallo's原始答案修改而来:

CSS:

代码语言:javascript
复制
.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 (假定生成了HTML):

代码语言:javascript
复制
<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:

代码语言:javascript
复制
$(function() {
    $(".image-thumb a").click(function(e) {
        e.preventDefault();
        var imageId = $(this).parent().attr("id");
        // remove image based on ID.
    });
});

编辑:简化了HTML。

票数 3
EN

Stack Overflow用户

发布于 2009-12-16 03:49:39

代码语言:javascript
复制
<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:

代码语言:javascript
复制
function overlayPic(){
   $('removeImg').show();
}
function hideRemove(){
   $('removeImg').fadeOut();
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1909850

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档