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):

替换元素没有':: before'和':: after'伪元素;在替换内容的情况下，'content'属性替换元素框的整个内容。

Answer 2

假设您可以添加其他标记，可以使用以下内容：

http://jsfiddle.net/isherwood/jmXdh/11/

a {
    display: inline-block;
    overflow: hidden;
    position: relative;
}
a:hover .play {
    background:url(http://placehold.it/80x80) no-repeat center center;
    opacity: 0.8;
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -50px;
}

<a href="/">
    <div class="play"></div>
    <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
    <br />
    <b>Video test</b>
</a>

或具有过渡效果：

http://jsfiddle.net/isherwood/jmXdh/12/

.play {
    opacity: 0;
    transition: opacity 0.3s;
}
a:hover .play {
    opacity: 0.7;
}

如何为许多图像保留相同的悬停图像

2 个答案: