1

我正在尝试使图片在图片上褪色，并且纯粹使用 CSS3 出现在它们上面的一些文本。我从这里进行了基本的淡入淡出：http: //css3.bradshawenterprises.com/cfimg1/ 现在我要做的是，当我将图片悬停时，不仅另一张图片淡入，还有一些文字包含可点击链接的内容（例如下载链接）。第一个问题是文本出现在 div 之外，我可以通过添加以下内容来解决：

.crossfade h1 {
position: absolute;
}

我使用 h1，因为段落根本不出现。所以在此之后，我得到了正确的淡入淡出，甚至文本都在它的位置，但它不可选择且不可点击，它看起来像是图像的一部分。

到目前为止，这是我的代码（html和css部分也是）：

<div class="crossfade">
    <img class="bottom" src="pics\hover.jpg" />
    <h1>Title</h1>
    <img class="top" src="pics\23.jpg" />
</div>

.crossfade {
    position:relative;
    height:200px;
    width:200px;
    margin:0 auto;  
}
.crossfade img {
    position:absolute;
    left: 0;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;   
    transition: opacity 0.2s ease-in-out;
}

.crossfade img.top:hover {
    opacity: 0;
}

.crossfade h1 {
    position: absolute;
}

任何有关它的帮助或想法将不胜感激。提前致谢。

4

1 回答 1

2

http://jsfiddle.net/3tkWj/5/

我刚刚添加了另一个 :hover 和 z-index。

.crossfade img.top:hover, .crossfade p:hover+img {
    opacity: 0;
}

编辑：这是您想要的工作示例（请参阅评论）

http://jsfiddle.net/3tkWj/12/

当心，我修剪了 CSS。

于 2012-04-07T15:11:34.177 回答