努力让第 n 个孩子悬停在 IE 中工作答案

【问题标题】：Struggling to get nth child with hover to work in IE努力让第 n 个孩子悬停在 IE 中工作
【发布时间】：2016-06-11 16:11:58
【问题描述】：

首先我知道第 n 个孩子在 IE 中是不可编译的。所以我将不得不使用 jQuery 或 Selectivizr 来使 nth:child 在 IE 中工作（或者还有其他方法吗？）。

这里是 jsfiddle http://jsfiddle.net/kncdM/ 的链接。第 9 个、第 10 个和第 11 个 UL 标签必须重新定位，以防止它们溢出。

我该怎么做？

我曾尝试使用 jQuery 来执行此操作，但它似乎不起作用。我使用了以下代码

$( document ).ready(function() {
    $("ul:nth-child(9) li:hover ul").addClass("nth-child9");
});

添加以下 CSS：

#menu .nth-child9
top: initial; 
bottom: -60px;

请有人能解释一下如何让以下代码在 IE 中运行。谢谢你

【问题讨论】：

【解决方案1】：

$('ul:nth-child(9) li').on('hover', 'ul', function() {
   $(this).addClass("nth-child9");
});

但是，如果您所做的只是添加两个样式声明，为什么不直接使用 CSS？

ul:nth-child(9) li:hover ul {
    top: initial; 
    bottom: -60px;
}

【讨论】：

【解决方案2】：

这是一个非常古老的帖子，但通过 marc_s 的编辑（清理拼写等）恢复了活力。我仍然会提供答案，因为它毕竟是一个问答网站。

正如我在 cmets 中所说，在加载时向 nth-child 添加一个类，然后相应地编写您的 CSS 会更有意义。从语义上讲，这很简单，它允许您只编写一个 addClass 函数而不是附加一个事件处理程序。

jQuery

$("ul:nth-child(9)").addClass("nth-child9");

CSS

ul.nth-child9 li:hover ul {
    top: initial; 
    bottom: -60px;
}

【讨论】：