Search code examples
javascriptjquerymouseevent

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

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

I set up an jsfiddle here http://jsfiddle.net/4vfqgz7x/1/

Solution

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

    Reference: What elements can be contained within a <a> tag?