Другое поведение компонента при использовании jQuery 2, чем при использовании jQuery 3 или Vanilla JS

Question

Вы можете видеть в Codepen 3.4.1 , что желтый элемент списка перемещается влево при быстром перемещении мыши над другими элементами списка (как это также происходит при кодировании того же самого с обычным JS) .

Codepen

    <ul class="main">
      <li
        class="main-item"
        style="background-color: blue;"
      ></li>
      <li
        class="main-item"
        style="background-color: green;"
      ></li>
      <li
        class="main-item"
        style="background-color: greenyellow;"
      ></li>
      <li
        class="main-item"
        style="background-color: yellow;"
      ></li>
    </ul>

    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>

$(".main-item").hover(
  function() {
    $(this).addClass("main-item-highlight");
    $(this)
      .siblings()
      .addClass("main-item-lowlight");
  },
  function() {
    $(this).removeClass("main-item-highlight");
    $(this)
      .siblings()
      .removeClass("main-item-lowlight");
    console.log($(this).siblings());
  }
);

Однако при использовании jQuery 2 желтый элемент остается справа, как и ожидалось, см. Codepen 2.4.2 .

Codepen

<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous">
</script>

Я тестировал как в Chrome, так и в Firefox, как на разных компьютерах, так и результаты не меняйся

Есть идеи о том, что может вызвать такое поведение? Если да, есть ли способ достичь того же, что и в 2.4.2, с Vanilla JS или хотя бы с jQuery 3?

. Я также могу предоставить простой код JavaScript, если он может окажу любую помощь,

заранее спасибо!