Component's different behavior using jQuery 2, than using jQuery 3 or Vanilla JS

You can see in the Codepen 3.4.1 that the yellow list item moves left when moving the mouse quickly over the others list elements (as it also occurs when coding the same with plain 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());
  }
);

However, when using jQuery 2, the yellow element stays at right as expected, please see Codepen 2.4.2.

Codepen

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

I have tested both in Chrome and Firefox, as in different computers, and the results don't change.

Any idea of what could cause that different behavior? If so, is there a way to achieve the same thing than in 2.4.2 with Vanilla JS or at least with jQuery 3?

I can also provide the plain JavaScript code if it can be of any help,

thanks in advance!