html - 如何为许多图像设置相同的悬停图像

Question

我在表格中有几张图片，它们用作链接，悬停时应该会在它们上方显示一个播放按钮。

我尝试了许多不同的技巧，但它们都存在无法正常工作的问题。我决定在这里分享我的问题以找到标准解决方案。

这是我到目前为止所做的:

img{
    position: relative;
}
img:hover:before {
    background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
    content:"";
    width: 100%;
    min-height: 100px;
    position: absolute;
    left: 0;
}

我不知道我的方向是否正确，但看看演示 http://jsfiddle.net/jmXdh/8/如果有误，请通过其他方式告诉我。

Answer 1

不幸的是你can't使用 ::before 和 ::after pseudo-elements与 replaced元素。所有替换元素的内容都在 CSS 的范围之外。

来自Generated and Replaced Content Module (WD):

Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box.