5

背景画像を使用せずに、ホバー/ロールオーバー時に純粋な CSS 画像を変更しようとしています。これまでのところ、1 つの画像があり、その画像をロールオーバーすると、別の画像が表示されます。CSSは次のとおりです。

#hidden {
display: none;
}

#visible:hover + #hidden {
display: block;
}

したがって、#visiblediv をロールオーバーすると、#hiddendiv が表示されます。これが jsFiddle です: http://jsfiddle.net/MNyzd/1/

これはうまく機能しますが、まさに私が達成したいことではありません。画像を差し替えたい。したがって、ロールオーバーすると、表示されたままになるのではなく、消える#visibleはずです。私の最初の最初のアイデアは、div をホバー ( ) にすることでしたが、これはうまくいきませんでした。#visibledisplay:none#visible:hover display:none;

この方法を使用して、これを従来の画像のホバー/スワップに成功させる方法を知っている人はいますか? 任意の助けをいただければ幸いです。ここに jsFiddle があります... http://jsfiddle.net/MNyzd/1/

4

3 に答える 3

7

ホバーするコンテナーを使用します。

http://jsfiddle.net/MNyzd/8/

.hidden {
    display: none;
}

.container:hover .visible
{
    display: none;
}

.container:hover .hidden {
    display: block;
}

この回答も参照してください: CSS:hover (または必要に応じて JS) を介してコンテンツを非表示/表示する

于 2013-08-09T18:55:45.467 に答える
0

http://jsfiddle.net/MNyzd/4/

編集: コード:

#hidden {
display: none;
position: absolute; 
top: 8px;
left: 8px; 
}

#visible:hover + #hidden {
display: block;
}

#hidden, #visible {
width:300px;
height:300px;
}

<div id="visible"><img src="http://b.vimeocdn.com/ps/372/159/3721596_300.jpg"></div>
<div id="hidden"><img src="http://yuccan.com/wp-content/uploads/2013/04/cool-eez-spaced2.png"></div>
于 2013-08-09T18:51:54.467 に答える