Why this mouseenter event does not work on an tag inside tag

Question

I would like to know why this mouseenter event is never get call. Change the parent to ul tag and everything works

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself.** Even jsfiddle may not be available in the future. — freedomn-m, Feb 19 '19 at 16:42

score 1 · Accepted Answer · edited Feb 19 '19 at 15:57

1

The problem is that you cannot have an a element residing within another a element.

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

If you run and inspect the above code snippet, you will see the result in the DOM is actually:

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

Thus, your CSS Selector of a > i (select all i elements where the parent is an a element) is not going to work.

edited Feb 19 '19 at 15:57

double-beep

answered Feb 19 '19 at 15:43

Gary Thomas

Flagging as duplicate would suffice, no need to re-answer questions already having an answer. As the answer mentionned in your "reference" is enough. `An tag can contain any Inline Element besides another tag.` – Alexandre Elshobokshy Feb 19 '19 at 15:48

1 Answers1