Сохранять фоновое изображение css на SPAN в подменю - PullRequest
Новая
       33

Сохранять фоновое изображение css на SPAN в подменю

1 голос
/ 06 сентября 2011

Пожалуйста, посмотрите этот PasteBin для моего текущего кода: http://pastebin.com/3RtjYN00

В настоящее время, когда я нахожу курсор над основным изображением, положение фона изображения изменяется и появляется синее подменю - отлично!

Однакопри наведении курсора на само синее подменю изображение возвращается в исходное положение без наведения фона.

Как решить эту проблему, чтобы при наведении указателя мыши на подменю изображение оставалось в состоянии «зависания»

Ответы [ 3 ]

1 голос
/ 06 сентября 2011

Нет необходимости добавлять дополнительную разметку.

Просто измените: 

#mega li a#ship span:hover {

на 

#mega li:hover a#ship span {

Пример в реальном времени: http://jsfiddle.net/tw16/fmNCz/

0 голосов
/ 06 сентября 2011

Опираясь на McGarrier ответ.

добавить этот 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

0 голосов
/ 06 сентября 2011

Добавьте div-оболочку вокруг основного изображения и синего подменю. Затем: наведите курсор на обертку, измените положение фона основного изображения дочерних элементов и установите синий стиль подменю, который будет отображаться.

Таким образом, когда вы будете наводить курсор на синее подменю, изображение останется в состоянии «зависания».

Edit: Замените 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;}

Я использовал твой ли в качестве обертки, и он отлично работает на моей стороне.

...