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之后，忽略非元素节点（例如文本节点和注释）时匹配元素F.元素E和F必须共享相同的父级，E必须紧接在F之前。要匹配父级的第一个子级，请使用：first-child伪类。

     

注意需要Windows Internet Explorer 7或更高版本。
  注意 组合器仅在符合标准的模式下启用（严格！DOCTYPE）。

其他提示

将悬停添加到li元素并修复悬停是否更简单，即使用 http://www.xs4all.nl/~peterned/csshover.html

即

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

希望有所帮助

约什

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top