如何将下面的JS转换为JQuery？ [复制]

我很难将以下 JS 转换为 JQuery。

我的项目有一个#HoverMediv 将其悬停在其中以显示其中的内容#hidden div.

我有一个运行良好的 JS 脚本（这个问题，作者：anied https://stackoverflow.com/questions/39939485/js-scroll-a-hover-related-div/39939793?noredirect=1#comment67161305_39939793）。我尝试重写document.getElementById("HoverMe"); to $("#HoverMe").hover(function() {等等，但我不能再进一步了，因为我对 jQuery 的理解为零。

这就是我的 div 的样子

                      ------------     --------- _
                     |  #HoverMe   |  | #hidden |S| //hover #HoverMe to display #hidden                           
                      ------------    | --------|R|
                                      | car.name|O|       
                                      |---------|L|
                                      | car.name|L|
                                       ---------|B|
                                      | car.name|A|
                                      |---------|R|
                                      | car.name| |
                                       ---------|_|
<div>
    <div id="HoverMe" style="width: 100px; background: green">
        Car
    </div>
    <div id="hidden" style="overflow:auto; height:100px; position: absolute; background-color: red; display: none">

        @foreach (var car in Model.Car) { @* Where the #hidden list get its content *@
            <div>@car.Name</div>
       }

    </div>
</div>

如何将下面的JS转换为JQuery？

    var hoverEle = document.getElementById("HoverMe");
    var popupEle = document.getElementById("hidden");
    var timeoutId;

    function showPopup() {
        var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element
        popupEle.style.left = (hoverRect.right + 16) + "px";
        popupEle.style.top = hoverRect.top + "px";
        popupEle.style.display = "block";
    }

    function hidePopup() {
        popupEle.style.display = "none";
    }

    hoverEle.addEventListener('mouseover', function () {
        showPopup();
    }, false);

    hoverEle.addEventListener('mouseout', function () {
        timeoutId = window.setTimeout(function () {
            hidePopup();
        }, 1500);
    }, false);

    popupEle.addEventListener('mouseover', function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
        }
    }, false);

    popupEle.addEventListener('mouseout', function () {
        timeoutId = window.setTimeout(function () {
            hidePopup();
        }, 1500);
    }, false);

</script>

因此，将 JS 转换为 jQuery 的技巧：

• 您可以使用简单的 CSS 选择器来选择元素。所以var hoverEle = document.getElementById("HoverMe");变成var hoverEle = $('#HoverMe');
• 添加事件监听器是通过利用 jquery 来完成的.on http://api.jquery.com/on/方法。所以hoverEle.addEventListener('mouseover', function () { showPopup(); }, false);变成（没有任何委托）hovereEle.on('mouseenter', function () { showPopup(); });
• CSS 可以使用以下命令进行更改.css http://api.jquery.com/css/ method
• 可以使用简单的隐藏和显示来切换.hide http://api.jquery.com/hide/ and .show http://api.jquery.com/show/方法。

另外，一个很棒的 jQuery 快速参考/备忘单是https://oscarotero.com/jquery/ https://oscarotero.com/jquery/