在子菜单中时，保持跨度上的css背景图像
在子菜单中时，保持跨度上的css背景图像
提问于 2011-09-06 04:48:42
请查看我当前代码的PasteBin：http://pastebin.com/3RtjYN00
目前，当我将鼠标悬停在主图像上时，图像背景位置发生了变化，出现了一个蓝色的子菜单--太棒了！
但是，当我将鼠标悬停在蓝色的子菜单上时，图像会返回到它原来的非悬停背景位置。
我如何解决这个问题，当我将鼠标悬停在子菜单上时，图像停留在“悬停”状态？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-09-06 05:20:02
不需要添加任何额外的标记。
只需更改：
#mega li a#ship span:hover { 至
#mega li:hover a#ship span {现场示例：http://jsfiddle.net/tw16/fmNCz/
Stack Overflow用户
发布于 2011-09-06 05:02:51
在主图像和蓝色子菜单周围添加一个div包装器。然后在包装器的:hover上，更改子主图像的背景位置，并将蓝色子菜单样式设置为可见。
这样，当你悬停在蓝色的子菜单上时，图像将停留在“悬停”状态。
编辑:将css的最后两行替换为这两行。
#mega li a#ship span{background:url('http://indiawebsearch.com/files/image/thumb_googlelogo.jpg') no-repeat; position:absolute; width:100%; height:100%;}
#mega li:hover a#ship span{background-position:0 -59px;}我使用您的li作为包装器，它在我这边运行得很好。
Stack Overflow用户
发布于 2011-09-06 05:16:44
基于mcgarriers的答案。
添加此CSS
.mega-wrap:hover>#mega li a#ship span {
background: url('http://indiawebsearch.com/files/image/thumb_googlelogo.jpg') 0 -59px no-repeat;
position: absolute;
width: 100%;
height: 100%;
}添加此HTML
<body id="home">
<div id="container">
<div id="top"> </div>
<div id="middle">
<div id="nav">
<div class="mega-wrap">
<ul id="mega">
<li><a href="/shipping/" id="ship" class="shipping-info"><span> </span>Home</a>
<b class="s4"></b>
<div> <b class="s1"></b><b class="s2"></b><b class="s3"></b><br /><br />
<p><a href="#">Test Link 1</a></p>
</div>
</li>
</ul>
</div>
</div>
</body> 然而，在您继续之前，我建议您修复您的html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7312611
复制相关文章
相似问题
腾讯云开发者
