Tengo <ul id="list"> y <li class="item-class"> . Cuando el usuario se desplaza sobre un <li> dentro de <ul> , primero quiero activar el <ul> y luego el <li> porque en mi situación particular, el orden es significativo. Sin embargo, jQuery primero dispara <li> hover y luego el evento <ul> . ¿Hay alguna forma de revertir este orden?

Hagamos una lista desordenada:

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

y este código jQuery:

 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.")); }

Cuando el usuario se desplaza sobre un <li> y luego se desvía hacia atrás, quiero ver

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

en la consola, sin embargo, por alguna razón veo esto:

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

Aquí está MRE: http://jsfiddle.net/frz24w9L/