IE7 / Quirks Mode Child Div Hover Проблема - PullRequest
Новая
       18

IE7 / Quirks Mode Child Div Hover Проблема

0 голосов
/ 25 июня 2011

Эффект:

Поле с текстом и кнопкой, которая появляется при наведении курсора на элемент TD. В IE 7 окно появится, но исчезнет, ​​как только вы попытаетесь навести на него курсор. IE8 + / FF / Ch / Sf все позволяют навести курсор на дочерний DIV отлично. Что я делаю не так?

Простой код:

CSS 

td {
    position:relative;
    width:30px;
}

.hovering_box { 
    display:none;
    position:absolute;
    margin-left:25px;
}

td .slot:hover .hovering_box {
    display:block;
}

.hovering_box:hover {
    display:block;
}

HTML 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <table>
    <tr>
      <td class='slot'>
        <div class='hovering_box'>
          <span class='box_title'>Title Here</span>
          <span class='box_message'>Help me!</span>
          <button>OK!</button>
        </div>
      </td>
    </tr>
  </table>
</html>

Ответы [ 2 ]

5 голосов
/ 25 июня 2011

IE6 не поддерживает наведение на элементы, кроме ссылок, поэтому вам придется использовать javascript для поддержки IE6. Я бы посоветовал просто использовать jQuery для совместимости IE6 и IE7. 

$('td .slot').hover(function(){
    $(this).addClass('hover');
},function(){
    $(this).removeClass('hover');
});

Затем измените ваш CSS следующим образом. 

td .slot:hover .hovering_box,td .slot.hover .hovering_box {
    display:block;
}

.hovering_box:hover,.hovering_box.hover {
    display:block;
}
2 голосов
/ 25 июня 2011

Как правильно сказано @Lime, IE6 не поддерживает :hover для элементов, отличных от a.

Чтобы исправить это, я рекомендую использовать Что бы то ни было: hover :

Что бы то ни было: hover - это небольшой скрипт, который автоматически исправляет :hover, :active и :focus для IE6, IE7 и IE8 причуды, позволяющие вам использовать их, как вы будет в любом другом браузере.

Я думаю, что это более чистый и простой вариант, чем использование собственной :hover эмуляции.

...