javascript - 悬停时在图像上显示链接

This question already has answers here:

How to display image over image on hover with css
                                
                                    （3个答案）
                                
                        
                                5年前关闭。
            
                    
我想像this site中那样存档效果

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

original image

when hovered

我该如何实现？

最佳答案

您可以通过仅使用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/

关于javascript - 悬停时在图像上显示链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22033876/