IE6 CSS Hover проблемы с меню - PullRequest
Новая
       36

IE6 CSS Hover проблемы с меню

2 голосов
/ 18 сентября 2009

У меня есть меню наведения CSS, которое работает во всех браузерах, кроме ... сюрприз - IE6! 

#menu_right ul li:hover ul { visibility: visible; }

Этот ul изначально скрыт, очевидно. Когда я наведите курсор мыши на его родителя li, он должен появиться ... но это не так.

Чтобы попытаться точно определить проблему, я попытался сделать ul изначально видимым и заставил действие при наведении на что-то другое. Например: 

#menu_right ul li ul { visibility: visible; }

#menu_right ul li:hover ul { background: red; }

Это не помогает. В других браузерах (включая IE7 +) ul станет красным, когда я наведу курсор на его родительский list element. Но не в IE6. Чего мне не хватает?

Ответы [ 5 ]

7 голосов
/ 18 сентября 2009

IE6 не знает псевдо-атрибут CSS :hover, когда он появляется ни на чем, кроме элемента ссылки. Вы должны будете использовать JavaScript для этого. Попробуйте использовать условные операторы, и если вы используете jQuery , вы можете закодировать эффект наведения для IE6 в 3 (+/- форматирование) строки: 

<!--[if lt IE 7]>
<script type="text/javascript">
$('#menu_right ul li').hover (function () {
  $(this).addClass ("hover");
}, function () {
  $(this).removeClass ("hover");
});
</script>
<style type="text/css">
#menu_right ul li.hover {...}
...
</style>
<![endif]-->

Отметьте, что в инструкциях CSS я использовал точку вместо двоеточия.

Приветствия

3 голосов
/ 20 сентября 2009

Взгляните на что угодно: hover http://www.xs4all.nl/~peterned/csshover.html. Этот ребенок решает всевозможные странные проблемы с зависанием IE6, может решить вашу.

3 голосов
/ 18 сентября 2009

Вы должны использовать что-то вроде этого 

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
  <li><a href="#"></a></li>
</ul>

и стиль <a> вместо <li>. Вы просто должны убедиться, что размер a равен точно такого же размера , что и li. 

div.menu ul.menu {
    margin:0;
    padding:0;
}

div.menu ul li {
    margin:0;
    padding:0;
}

div.menu ul.menu a {
    display:block;
    height:22px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:252px;
}

Причина, по которой вы видите, что он работает в любом браузере, кроме IE6, заключается в том, что он поддерживает :hover только для <a> элементов.

2 голосов
/ 18 сентября 2009

Нет :hover ни на чем, кроме <a> ... Боже, я люблю этот браузер.

Попробуйте использовать: hover в удобно расположенном <a> (если это список ссылок, как и в большинстве меню CSS при наведении, это не будет проблемой), или просто используйте Javascript, как уже предлагалось.

0 голосов
/ 11 апреля 2013

Это точно так, как писал Тал . Я не знаю, как это работает с таблицей, но этот пример отлично работает в IE6.

http://www.cssplay.co.uk/menus/final_drop.html

...