Question

我正在尝试将带有标题的透明PNG悬停在照片上。当我给出div的位置：绝对或指定的宽度时，悬停消失。但是，如果我不这样做，则悬停显示在图像的右侧和左侧。

我显然做错了什么但是无法弄清楚是什么。任何帮助，将不胜感激。

谢谢！

这是网站和相关代码。

网站：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/

如果你想为搜索引擎优化目的包含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/

Answer 2

您是否希望图像显示在当前图像上？如果是这样，它就是这样的，我必须使用左边的像素量才能使它成为中心：

<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;
}

Answer 3

不确定这是否有问题，但您不需要为h3:hover分配相同的属性，它必须是这样的：

h3:hover {
background-image:url('http://theshalomimaginative.com/Graphics/Homepagehover.png');
}

无法将背景图像悬停在图像上方

3 个答案: