Javascript 悬停时在图像上显示链接

我想把效果归档，就像

当我将鼠标悬停在图像上时，我想显示带有引导图标的链接。我使用的是bootstrap3

original image

---

如何实现这一点？

您可以使用CSS实现这一点

HTML：

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

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

---

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

HTML:

---

您可以通过使用html和css来实现这一点

HTML:

小提琴： 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>

---

请分享一些代码片段。

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

}

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

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

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

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