CSS 相邻同级选择器 - IE8 问题

发布于 2024-08-08 21:30:29 字数 748 浏览 8 评论 0原文

我正在使用 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>

据说,当鼠标悬停在“Hover Over Me”上时,应该显示同级 ul。它在 Firefox 中运行良好,但在 IE8 中则完全不起作用。我确信我以前见过 IE8 中使用的“+”同级选择器,我哪里出错了?

I am creating a menu system using a UL/LI structure. I'm trying to use sibling selectors for hover/show-sub-menus.

I'm using this;

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

The UL structure would be something like this;

<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>

Supposedly, when hovering over "Hover Over Me", the sibling ul should be displayed. It works great in Firefox, but not at all in IE8. I'm sure I've seen the '+' sibling selector used in IE8 before, where am I going wrong?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

绾颜 2024-08-15 21:30:29

您需要确保 IE 在标准模式下运行 - 输入如下的文档类型:

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

From 文档

相邻同级组合符是一个“加号”(+) 字符,用于分隔两个简单选择器。空格并不重要。

“E+F”形式的选择器在文档树中紧跟在同级元素 E 之后时与元素 F 匹配,忽略非元素节点(例如文本节点和注释)。元素 E 和 F 必须共享相同的父元素,并且 E 必须紧邻 F。要匹配父元素的第一个子元素,请使用 :first-child 伪类。

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

You need to make sure IE is running in standards mode - put in a doctype like this:

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

From the documentation:

The adjacent sibling combinator is a "plus sign" (+) character that separates two simple selectors. Whitespace is not significant.

A selector of the form "E+F" matches element F when it immediately follows sibling element E in the document tree, ignoring non-element nodes (such as text nodes and comments). Element E and F must share the same parent and E must immediately precede F. To match the first child of the parent, use the :first-child pseudo-class.

Note Requires Windows Internet Explorer 7 or later.
Note Combinators are enabled only in standards-compliant mode (strict !DOCTYPE).

寄离 2024-08-15 21:30:29

在 li 元素上添加悬停并使用此 http 修复 ie 的悬停是否会更简单://www.xs4all.nl/~peterned/csshover.html

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

有帮助

希望对乔希

would it be simpler to add the hover on the li element and fix the hover for ie using this http://www.xs4all.nl/~peterned/csshover.html

ie

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

Hope that helps

Josh

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文