请参阅此 PasteBin 以获取我当前的代码：http ://pastebin.com/3RtjYN00
目前，当我将鼠标悬停在主图像上时，图像背景位置会发生变化并出现蓝色子菜单 - 太棒了！
但是，当我将鼠标悬停在蓝色子菜单本身上时，图像会返回到其原始的非悬停背景位置。
我该如何解决这个问题，所以当我将鼠标悬停在子菜单上时，图像会保持“悬停”状态？
问问题
566 次
3 回答
1
无需添加任何额外的标记。
简单地改变：
#mega li a#ship span:hover {
到
#mega li:hover a#ship span {
现场示例：http: //jsfiddle.net/tw16/fmNCz/
于 2011-09-05T21:20:01.777 回答
0
在主图像和蓝色子菜单周围添加一个 div 包装器。在包装器的 :hover 上，更改子主图像的背景位置并将蓝色子菜单样式设置为可见。
这样，当您将鼠标悬停在蓝色子菜单上时，图像将保持“悬停”状态。
编辑：用那些 2 替换你的 css 的最后 2 行。
#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 作为包装，它在我这边工作得很好。
于 2011-09-05T21:02:50.677 回答
0
基于 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
于 2011-09-05T21:16:43.817 回答