Maintain css background image on SPAN when in Submenu_问答_开发者

Maintain css background image on SPAN when in Submenu

开发者 https://www.devze.com 2023-04-02 08:46 出处：网络

Please see this PasteBin for my current code: http://pastebin.com/3RtjYN00 Currently when I hover over the main image, the image background position changes & a blue submenu appears - great!

Please see this PasteBin for my current code: http://pastebin.com/3RtjYN00

Currently when I hover over the main image, the image background position changes & a blue submenu appears - great!

However, when I hover over the blue submenu itself, the image returns to it's开发者_JS百科 original non-hover background position.

How do I solve this problem so when I hover over the submenu the image stays in the "hover" state?

There is no need to add any extra markup.

Simply change:

#mega li a#ship span:hover {

#mega li:hover a#ship span {

Live example: http://jsfiddle.net/tw16/fmNCz/

building on mcgarriers answer.

add this 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%;
}

add this 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>

however before you go any further I advice you to fix your html

Add a div wrapper around your main image and your blue submenu. Than on the :hover of the wrapper, change the background-position of the children main image and set the blue submenu style to be visible.

This way, when you'll be hover the blue submenu, the image will stay in the "hover" state.

Edit: Replace the 2 last lines of your css with those 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;}

I used your li as a wrapper and it's working fine on my side.