如何为许多图像使用相同的悬停图像答案

【问题标题】：how to have the same hover image for many images如何为许多图像使用相同的悬停图像
【发布时间】：2013-06-21 12:49:03
【问题描述】：

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

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

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

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

【问题讨论】：

为什么你不能简单地为你的元素添加一个额外的类，只在悬停时加载背景图像？

标签： html image css hover

【解决方案1】：

不幸的是，can't 使用了 ::before 和 ::after pseudo-elements 和 replaced 元素。所有被替换元素的内容都超出了 CSS 的范围。

来自Generated and Replaced Content Module (WD):

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

【讨论】：

但是 OP 可以使用 a:before 代替，不是吗？

【解决方案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;
}

【讨论】：