在子菜单中保持 SPAN 上的 CSS 背景图像答案

【问题标题】：Maintain css background image on SPAN when in Submenu在子菜单中保持 SPAN 上的 CSS 背景图像
【发布时间】：2011-11-10 20:58:44
【问题描述】：

请查看此 PasteBin 以获取我当前的代码：http://pastebin.com/3RtjYN00

目前，当我将鼠标悬停在主图像上时，图像背景位置会发生变化并出现蓝色子菜单 - 太棒了！

但是，当我将鼠标悬停在蓝色子菜单本身上时，图像会返回到它原来的非悬停背景位置。

如何解决这个问题，当我将鼠标悬停在子菜单上时，图像会保持“悬停”状态？

【问题讨论】：

标签： css hover submenu

【解决方案1】：

在您的主图像和蓝色子菜单周围添加一个 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 作为包装器，它在我这边工作得很好。

【讨论】：

您是否有机会使用我的 Pastebin 代码组合一个快速代码版本？老实说，我有点失落。欣赏它。谢谢
完成了，我将更新放在编辑下方的答案中。希望对您有所帮助。
非常感谢西蒙。我将尝试上面 tw16 的方法，但这看起来一样好。

【解决方案2】：

无需添加任何额外的标记。

简单的改变：

#mega li a#ship span:hover {

到

#mega li:hover a#ship span {

现场示例：http://jsfiddle.net/tw16/fmNCz/

【讨论】：

【解决方案3】：

基于 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">&nbsp;</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

【讨论】：