html - 无法让背景图片悬停在图片上

Question

我正在尝试将带有标题的透明 PNG 悬停在照片上。当我给 div 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');
}

Answer 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/