Как в jQuery реализовать отдельную подсветку вложенных блоков при наведении курсора мыши?

Question

[Глойнус Алеос]

Как реализовать прямую подсветку или, как в случае моего примера, изменение цвета блока (а если точнее, то просто внесение изменений в свойства объекта) при наведении курсора мыши все знают:

$(document).on("mouseenter", ".aaa", function() {
  $(this).addClass("bbb");
});
$(document).on("mouseleave", ".aaa", function() {
  $(this).removeClass("bbb");
});

Но как сделать так, чтобы вложенные друг в друга элементы подсвечивались отдельно?

<div class="aaa">
  <div class="aaa">
    <div class="aaa">
      <div class="aaa">
      </div>
    </div>
  </div>
</div>

Немного похимичив я смог решить задачу только наполовину: https://codepen.io/anon/pen/oWJJjE — если вести курсор мыши от самого родительского блока к самому доченему, то они подсвечиваются по очереди и не одновременно, но если вести обратно, то подсвечиваются все. А надо, чтобы всегда подсвечивался только один: самый верхний из тех, на который наведён курсор мыши.

Answer 1

[iBird Rose]

https://codepen.io/anon/pen/rmoopz

Comments

[Глойнус Алеос]

Боже мой, такой маленький, лёгкий и красивый штрих просто завершает задачу как надо. Шикарно.
Благодарю.

[iBird Rose]

Глойнус Алеос: там еще функции событий поменялись) если что)

[Глойнус Алеос]

Да, конечно заметил.
Ещё очистил от лишнего, на случай, если кто-то решит посмотреть: https://codepen.io/anon/pen/WjLmLW?editors=0010