0

写真の上にキャプション付きの透明なPNGをホバーしようとしています。divs position: absolute または指定された幅を指定すると、ホバーが消えます。ただし、そうしないと、ホバーが画像の左右に表示されます。

私は明らかに何か間違ったことをしていますが、何がわからないのですか。どんな助けでも大歓迎です。

ありがとう！

ここにサイトと関連コードがあります。

ウェブサイト: http://www.theshalomimaginative.com/

<div id= "logo">
 <h3><img src="Graphics/splashpagelogo.png"  alt="The Shalom Imaginative Documentary Photography" /></h3>
</div>


#logo {
position:absolute; width:475px; height:365px; padding: 0 0 0 242px;
}   

h3 {
position:absolute; width:475px; height:365px;display: block;
}

h3:hover {
position:absolute; width:475px; height:365px; display: block; background-image:   url('http://theshalomimaginative.com/Graphics/Homepagehover.png');
}
4

4 に答える 4

3

私がすぐに目にする問題の1つは、タグを正しく閉じなかったことです。

それ以外の

</logo>

そのはず：

</div>

代わりにこれを行うことができます：

<div id="logo">

</div>

#logo {
    position:absolute;
    width:475px;
    height:365px;
    padding: 0 0 0 242px;
    background: url('http://theshalomimaginative.com/Graphics/splashpagelogo.png') no-repeat;

} 

#logo:hover {
    position: absolute;
    width:475px;
    height:365px;
    background: url('http://theshalomimaginative.com/Graphics/Homepagehover.png') no-repeat;    
}

http://jsfiddle.net/tech0925/SW7GP/

また、SEOの目的でh3タグを含めたい場合は、次のようにすることができます。

<div id="logo">
<h3>Something Here</h3>
</div>

#logo {
    position:absolute;
    width:475px;
    height:365px;
    padding: 0 0 0 242px;
    background: url('http://theshalomimaginative.com/Graphics/splashpagelogo.png') no-repeat;

} 

#logo:hover {
    position: absolute;
    width:475px;
    height:365px;
    background: url('http://theshalomimaginative.com/Graphics/Homepagehover.png') no-repeat;    
}

#logo h3 {
text-indent: -9999px;
}

http://jsfiddle.net/tech0925/YnMeD/

于 2013-01-23T16:32:37.063 に答える
0

代わりに CSS スプライトを使用してください。

両方の画像を 1 つに結合して、画像が横に並ぶようにします。

次に、h3 内でイメージ タグを使用する代わりに、h3 タグのみを使用します。ホバーすると、背景の位置を移動して、スプライトに他の画像を表示するだけです。

CSS スプライトを使用する利点は、ユーザーが 1 つの画像をダウンロードするだけで済むことです。

HTML

<div id= "logo">
 <h3>The Shalom Imaginative Documentary Photography</h3>
</div>

CSS

#logo {
    position:absolute; 
    width:475px; 
    height:365px; 
    padding: 0 0 0 242px;
}   

h3 {
    background-image: url('yourcsssprite.png');
    position:absolute;
    text-indent: -9999em;
    width:475px; 
    height:365px;
}

h3:hover {
    background-position: -475px 0;
}
于 2013-01-23T16:41:09.513 に答える
0

現在の画像の上に画像を表示しますか? このように動作する場合は、左側のピクセル量を操作して中央に配置する必要がありました。

<div id= "logo">
 <img src="Graphics/splashpagelogo.png"  alt="The Shalom Imaginative Documentary Photography" />
 <div id="overlay">
 <img src="http://theshalomimaginative.com/Graphics/Homepagehover.png"  alt="The Shalom Imaginative Documentary Photography" />
 </div>
</div>


#logo {
position:absolute; width:475px; height:365px; padding: 0 0 0 242px;
}   
#overlay {
    display: none;
    position:absolute; width:475px; height:365px; top: 0; left: 195px; margin-top: 5px;
}
#logo:hover #overlay {
    display: block;
}
于 2013-01-23T16:47:16.877 に答える
-1

これが問題かどうかはわかりませんが、同じプロパティを に割り当てる必要はありません。次のようにする必要がありますh3:hover。

h3:hover {
background-image:url('http://theshalomimaginative.com/Graphics/Homepagehover.png');
}
于 2013-01-23T16:34:43.397 に答える