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 に答える