为什么这个 mouseenter 事件对 <a> 标签内的 <i> 标签不起作用
Why this mouseenter event does not work on an <i> tag inside <a> tag
我想知道为什么这个 mouseenter
事件从来没有被调用过。将父级更改为 ul tag
,一切正常
我在这里设置了一个jsfiddle
http://jsfiddle.net/4vfqgz7x/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?
我想知道为什么这个 mouseenter
事件从来没有被调用过。将父级更改为 ul tag
,一切正常
我在这里设置了一个jsfiddle http://jsfiddle.net/4vfqgz7x/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?