Question

我正在使用本教程进行图像悬停效果： http://webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3/

当图像拇指已在另一条线上时，最后一次叠加仍然保持一致。

以下是截图：http://imgur.com/a/jABsl 每个拇指都是这样的：

<a href="image.jpg">
    <span class="overlay"></span> <!-- this is position:absolute -->
    <img src="thumb.jpg">
</a>

感谢您的帮助。

Answer 1

请检查：http://jsfiddle.net/XSgq4/

<div class="overlay">
    <a href="http://www.stackoverflow.com/">
        <img src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png" />
    </a>
</div>

CSS

.overlay {
    display:inline-block;
    position:relative;
}
.overlay > a:hover:after {
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:rgba(0, 0, 0, .3);
}

或跨度版本：http://jsfiddle.net/XSgq4/1/

内联元素中的CSS位置绝对

1 个答案: