I have a <ul id="list"> and <li class="item-class">. When user hovers over an <li> inside of <ul> I want to first trigger the <ul> hover and then <li> hover because in my particular situation the order is significant. However, jQuery first fires <li> hover and then the <ul> event - is there a way to revert this order?

Let's have an unordered list:

  <ul id="list">
    <li class="list-item"> Argentina </li>
    <li class="list-item"> Mexico </li>
    <li class="list-item"> Brazil </li>
  </ul>

and this jQuery code:

function bindHoverEvents() {
    $('#list').hover(() => console.log("1. List hover"),
                     () => console.log("4. List unhover"));
    $('.list-item').hover(() => console.log("2. Item hover"),
                          () => console.log("3. Item unhover."));
}

When user hovers over an <li> and then unhovers back I a want to see

"1. List hover"
"2. Item hover"
"3. Item unhover."
"4. List unhover"

in the console, however, for some reason I see this:

"2. Item hover"
"1. List hover"
"3. Item unhover."
"4. List unhover"

Here's MRE: http://jsfiddle.net/frz24w9L/