悬停时在图像上显示链接[重复]答案

【问题标题】：show link over the image when hovered [duplicate]悬停时在图像上显示链接[重复]
【发布时间】：2014-03-28 20:06:15
【问题描述】：

我想存档this site中的效果

当我将鼠标悬停在图像上时，我想显示一个带有引导图标的链接。我正在使用引导程序 3。

original image

when hovered

我怎样才能做到这一点？

【问题讨论】：

请分享一些代码sn-p。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您可以使用 CSS 来做到这一点

HTML：

<a href="#"><img src="img_url" /></a>

CSS：

a {
  position: relative;
  display: inline-block;
}

a:hover:before {
  content: '';
  display: block;
  background: rgba(255, 0, 0, .5); /* your background */
  width: 20px; /* image width */
  height: 100px; /* image height */
  position: absolute;
  top: 0;
  right: 0;
}

SOURCE

【讨论】：

【解决方案2】：

不是最有效的方法，但是可以，您可以通过以下方式实现：

HTML：

<div class="thumbnail-parent">
  <img class="thumbnail" src="http://placehold.it/200x200" />
  <div class="badge"></div>
</div>

CSS：

.thumbnail-parent, .thumbnail {
    width: 200px;
    height: 200px;
    position: relative;
    display: inline-block;
}

.badge {
    width: 20px;
    height: 20px;
    background-color: Black;
    position: absolute;
    top: 0px;
    right: 0px;
    visibility: hidden;
}

.thumbnail-parent:hover .badge {
    visibility: visible;

}

【讨论】：

【解决方案3】：

您可以只使用 html 和 css 来实现。

HTML：

<div class="img-wrap">
    <img src="http://placekitten.com/240/310" />
    <a class="show-on-hover" href="#"></a>
</div>

CSS：

.img-wrap {
    position: relative;
    display: inline-block;
}

.img-wrap img {
    display: block;
}

.show-on-hover {
    display: none;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 0;
    background: url('http://placekitten.com/20/30');
}

.img-wrap:hover .show-on-hover {
    display: block;
}

小提琴： http://jsfiddle.net/HRb4L/

【讨论】：

【解决方案4】：

CSS

.main-block {
width:200px;
height:auto;
position:relative;
display:block;}

.main-block img{width:100%; }

.main-block .badge {width:29px;
height:55px;
background:url(images/badge.png) no-repeat 0 0;
position:absolute;
right:10px;
top:0;
display:none;}

.main-block .badge a {display:block;
height:55px;}

.main-block:hover .badge {display:block;}

HTML

<div class="main-block"><div class="badge"><a href="#"></a></div><img src="images/character-render.gif" width="400" height="300" alt="1" /> </div>

【讨论】：