Javascript 组件'；使用jQuery2的行为与使用jQuery3或Vanilla JS的行为不同

您可以在代码笔3.4.1中看到，当鼠标快速移动到其他列表元素上时，黄色列表项向左移动（在使用纯JS编码相同元素时也会发生这种情况）

但是，当使用jQuery 2时，黄色元素如预期的那样保留在右侧，请参见Codepen 2.4.2

我已经在Chrome和Firefox上进行了测试，就像在不同的计算机上一样，结果没有改变

你知道是什么导致了这种不同的行为吗？如果是这样，有没有一种方法可以实现与2.4.2中使用Vanilla JS或至少使用jQuery 3相同的效果

我也可以提供简单的JavaScript代码，如果有帮助的话

提前谢谢

    <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());
  }
);

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