jquery - 内联元素中的 CSS 绝对位置

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/