изменить фоновое изображение li на a: hover - PullRequest
Новая
       9

изменить фоновое изображение li на a: hover

5 голосов
/ 23 июня 2010

У меня есть меню: 

<div id=menu>
   <ul=navigation>
     <li><a href=>Home</a></li>
   </ul>
</div>

Используя технику раздвижных дверей, я хочу создать мою кнопку (с закругленными углами внизу.)

Я могу заставить это работать, наводя a и li. Но li больше, и если я наведу курсор мыши на li, не наведя курсор на a, только фоновое изображение для li показывает.

Теперь мне интересно, есть ли способ соединить наведение курсора li и наведение a внутри css. Я скорее исправляю эту проблему без использования JavaScript.

Google не помог мне дальше. Я предполагаю, что это невозможно, но я хотел быть уверен, прежде чем пробовать другие варианты.

Заранее благодарим за любые советы / помощь / предложения.

Ответы [ 3 ]

7 голосов
/ 23 июня 2010

Из того, что я понимаю, вы не можете делать то, что вы делаете, как вы это описали.

Однако я бы сделал так, чтобы «тег» отображался как блок, и устанавливал ширину и высоту, чтобы заполнить «LI», таким образом, вы можете использовать: hover и изменять целое значение bg, чтобы оно выглядело как LI. меняется 


li a {
    background:#000 url(images/bg.png) no-repeat 0 0;
    display:block;
    height:20px;
    width:100px;
}
li a:hover {
    background:#fff url(images/bg.png) no-repeat 0 -20px;
}

также используйте некоторые отступы, чтобы разместить текст в нужном месте внутри «LI» и удалите все отступы из «LI»

li: hover не поддерживается без JS в более старых версиях IE, поэтому использование вместо него: hover обеспечивает лучшую совместимость с браузерами

5 голосов
/ 23 июня 2010

Вы можете сделать это просто с помощью: 

<div id=menu>
   <ul>
     <li><a href=>Home</a></li>
   </ul>
</div>

Тогда в вашем CSS: 

#menu ul li:hover{
   background-image:url(newimage);
}

Если вам требуется соответствие IE6, просто сделайте ваши ссылки заполненными на всю ширину UL. 

#menu ul li a:link, #menu ul li a:visited{
    display:block;
    width:999px;  <-- enter pixels
    height:999px; <-- enter pixels
}

затем измените фоновое изображение как обычно: 

#menu ul li a:hover{
    background-image:url(newimage);
}
4 голосов
/ 23 июня 2010 
#menu li {
  /* normal li style */
}

#menu li a {
  /* normal a style */
}

#menu li:hover {
  /* hover li style */
}

#menu li:hover a {
  /* hover a style */
}

Не будет работать с IE6 ...

...