0

我在表格中有几张图片，它们作为链接工作，悬停时应该会出现一个播放按钮。

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

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

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/，如果有误，请以其他方式告诉我。

4

2 回答 2

3

不幸的是，您不能将::beforeand::after 伪元素与替换元素一起使用。所有被替换元素的内容都超出了 CSS 的范围。

从生成和替换的内容模块 (WD)：

被替换的元素没有 '::before' 和 '::after' 伪元素；在替换内容的情况下，'content' 属性会替换元素框的全部内容。

于 2013-06-24T21:15:23.613 回答
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;
}
于 2013-06-24T21:25:24.313 回答