0

次の CSS コードを使用して、テキストにロールオーバー効果を適用しています。

.thumb {
    position:relative;
}

.thumb img:hover {
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity:0;
    opacity:0;
}

.thumb:hover {
    background:#f00;
}

.thumb span {
    z-index:-10;
    position:absolute;
    top:10px;
    left:10px;
}

.thumb:hover span {
    z-index:10;
    color:#fff;
}

HTML コード:

<div class="thumb">
    <a href="http://domain.com/"><img src="thumbnail.jpg" /></a>
    <span>Text</span>
</div>

テキストの上にカーソルを置いたときを除いて、すべてがうまく機能しています。ロールオーバー効果が消え、画像が再び表示されます。

何か案は？

前もって感謝します

4

1 に答える 1

0

単純なオーバーレイ効果にはスタイルが多すぎると思います。私がゼロから作成したデモをご覧になりたい場合は、こちらからどうぞ

デモ

HTML

<div class="wrap">
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
    <div class="overlay">Hello This Is So Simple</div>
</div>

CSS

.wrap {
    position: relative;
    display: inline-block;
}

.overlay {
    opacity: 0;
    background: rgba(0,0,0,.8);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: opacity 1s;
    color: #fff;
    text-align: center;
}

.wrap:hover .overlay {
    opacity: 1;

}
于 2013-04-20T06:59:32.537 に答える