0

我正在尝试将带有标题的透明 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');
}
4

4 回答 4

3

我马上看到的一个问题是您没有正确关闭标签。

代替

</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 精灵。

将两张图像合并为一张，使图像并排排列。

然后不要在 h3 内使用图像标签，而只使用 h3 标签。在悬停时，您只需要移动背景位置即可在您的精灵中显示其他图像。

使用 css sprite 的优点是用户只需下载一张图像。

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 回答