CSS соседние селекторы-сиблинги - проблема с IE8

StackOverflow https://stackoverflow.com/questions/1612587

  •  06-07-2019
  •  | 
  •  

Вопрос

Я создаю систему меню, используя структуру UL / LI.Я пытаюсь использовать родственные селекторы для наведения курсора мыши / показа подменю.

Я использую это;

#MainMenu li.Sel ul li.HasSub a:hover+ul {
     display: block;
}

Структура UL была бы примерно такой;

<ul id='MainMenu'>
    <li class='Sel'>
    <a href='#'>Click Me</a>
        <ul>
            <li class='HasSub'>
                <a href='#'>Hover Over Me</a>
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Предположительно, при наведении курсора мыши на "Наведите курсор на меня" должно отображаться родственное ul.Это отлично работает в Firefox, но совсем не в IE8.Я уверен, что раньше видел селектор "+", используемый в IE8, где я ошибаюсь?

Это было полезно?

Решение

Вы должны убедиться, что IE работает в стандартном режиме - укажите такой тип документа: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

Из документации :

  

Соседний братский комбинатор является знаком "плюс" (+) символ, который разделяет два простых селектора. Пробелы не имеют значения.

     

Селектор формы "E + F"; соответствует элементу F, когда он сразу следует за родственным элементом E в дереве документа, игнорируя неэлементные узлы (такие как текстовые узлы и комментарии). У элементов E и F должен быть один и тот же родительский элемент, а E должен непосредственно предшествовать F. Чтобы сопоставить первый дочерний элемент родительского элемента, используйте псевдокласс: first-child.

     

Примечание . Требуется Windows Internet Explorer 7 или более поздней версии.
   Примечание Комбинаторы включаются только в режиме соответствия стандартам (строго! DOCTYPE).

Другие советы

было бы проще добавить наведение на элемент li и исправить наведение для ie, используя это http://www.xs4all.nl /~peterned/csshover.html

т. е.

#MainMenu li.Sel ul li.HasSub:hover {
     display: block;
}

Надеюсь, это поможет

Джош

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top