Question

请参阅此PasteBin了解我当前的代码：http://pastebin.com/3RtjYN00

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

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

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

Answer 1

无需添加任何额外标记。

简单地改变：

#mega li a#ship span:hover {

到

#mega li:hover a#ship span {

实例：http://jsfiddle.net/tw16/fmNCz/

Answer 2

在主图像和蓝色子菜单周围添加div包装。而不是：在包装器的悬停上，更改子主图像的背景位置，并将蓝色子菜单样式设置为可见。

这样，当您将鼠标悬停在蓝色子菜单上时，图像将保持“悬停”状态。

编辑：将css的最后2行替换为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;}

我用你的李作为包装，它在我这边工作得很好。

Answer 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

在子菜单中，在SPAN上维护css背景图像

3 个答案: