为什么这个 mouseenter 事件对 <a> 标签内的 <i> 标签不起作用

Question

我想知道为什么这个 mouseenter 事件从来没有被调用过。将父级更改为 ul tag，一切正常

我在这里设置了一个jsfiddle http://jsfiddle.net/4vfqgz7x/1/

Answer 1

问题是您不能让 a 元素位于内另一个 a 元素。

<a>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <a>3</a>
  <i>4</i>
</a>

如果您运行并检查上面的代码片段，您将看到 DOM 中的结果实际上是：

<a>
    <li class="complete">1</li>
    <li class="complete">2</li>
</a>
<a>3</a>
<i>4</i>

因此，您的 CSS 选择器 a > i (select all i 元素，其中parent is an a element) 不会起作用。

参考：What elements can be contained within a <a> tag?

Why this mouseenter event does not work on an <i> tag inside <a> tag