Question

我有代码：

<a class="preview" href="">
    <img class="frame" src="tmp5.png" alt="" />
</a>

a.preview:hover {
    background:red url('../images/icons/preview.png') 0 0 no-repeat;
    display:block;
    height:100%;
    width:100%;
    z-index:40;
}
a.preview:hover img {
    display:block;
    position:relative;
    z-index:10;
}

图像也是由CSS设计的，我只是想在悬停时添加锚背景来覆盖图像。

如果可能的话，我想避免使用JS。

有人有任何建议吗？

Answer 1

howabout：

a.preview:hover img {
    visibility:hidden
}

Answer 2

诀窍是尽量不用锚点覆盖图像，而是在锚点上添加一个（第二个？）图像，当悬停锚点时它将变得可见。您的HTML看起来像这样：

<a class="preview" href="">
    <img class="hover" src="/images/icons/preview.png" alt="" />
    <img class="frame" src="tmp5.png" alt="" />
</a>

但是，要将此图像放置在锚点附近或上方，我们必须使锚点相对，您的锚类看起来像这样：

a.preview:hover {
    position: relative;
    display:block;
    height:100%;
    width:100%;
    z-index:40;
}

要相对于其父锚定位这个新图像，我们给它一些样式，在这种情况下使它显示在锚的左上方：

a.preview img.hover {
    position: absolute;
    top:0;
    left:0;
    display: none; /* so it doesn't show by default */
}

为了让它在悬停链接时显示，我们可以为a.preview创建另一个悬停类：

a.preview:hover img.hover {
    display: block;
}

（我添加了这个答案，希望搜索者能得到另一种可用的答案）

锚定以悬停图像

2 个答案: