2

私はそのように背景として設定された画像を持っています

.about {
    height: 351px;
    background-image:url("../images/about.png");
    background-position:center;
    background-repeat:no-repeat;
}

そして、私はユーザーにしようとしています:hover

.about:hover {
    background-image:url("../images/hover.png");
}

上に別の画像を表示します。ホバー画像には透過性があるため、元の画像がまだそこにあることを望みます。

この方法で画像が置き換えられますが、置き換えずに元の画像にカーソルを合わせる方法はありますか?

4

2 に答える 2

3

マスク、または要素内の.about要素 (または絶対にその上に配置) が必要です。マスクの背景にはホバー画像がありますが、visibility:hidden. 次に、.about要素がホバー状態になると、マスクがアクティブになります。.about:hover .about-mask {visibility: visible;}. プロのヒント:visibility:hidden代わりに をdisplay:none使用すると、画像が表示されていなくても、ブラウザーが画像を読み込むことができるため、ちらつきが発生しません。

http://jsfiddle.net/nDHbD/

于 2013-07-22T14:36:31.730 に答える