锚覆盖的img悬停

我的代码：锚覆盖的img悬停

<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如果可能的话。

任何人有任何建议？

来源

2011-09-03 Veronique S.

你需要这在IE7的工作？ – thirtydot

会很棒，因为我想支持这个浏览器。 –

howabout：

a.preview:hover img { 
    visibility:hidden 
}

来源

2011-09-03 20:28:22 MLatzke

如果我想隐藏图像，这将起作用。我只是想将小图标（预览）添加到主播:) –

啊，那么你可以在图像上放置一个元素，正常隐藏它，并在悬停时显示它。 – MLatzke

诀窍是尽量不覆盖锚的形象，但加入了（第二？）图像内的锚徘徊锚时将变得可见。你的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 */ 
}

，并使其SHO w ^徘徊，我们可以为a.preview另一个悬停类的链接时达：

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

（我加在希望搜索这个答案会得到另一种可用的答案）

来源

2012-04-02 20:54:08 sg3s

锚覆盖的img悬停

回答

相关问题