Javascript JS-滚动与悬停相关的div

我有两个div，允许您将鼠标悬停在

#HoverMe

上，以便查看

#hidden

div中的内容（取消悬停时隐藏）。如果列表有点太长，它是可滚动的。但是，当我在

#HoverMe

div上悬停时，我无法滚动它。如果我想滚动

#Hidden

div，那么我必须移动，这会导致它再次消失（显然）

我希望能够悬停

#HoverMe

，并有5秒钟的时间移动到

#hidden

。如果在消失前将鼠标悬停在

#hidden

，它将停止隐藏计时器并能够滚动和检查内容

一个可能更糟糕的替代解决方案：

当鼠标位于

#HoverMe

时，滚动

#Hidden

div

它看起来是什么样子：

                      ------------     --------- _
                     |  #HoverMe   |  | #hidden |S|                           
                      ------------    | --------|R|
                                      | car.name|O|       
                                      |---------|L|
                                      | car.name|L|
                                       ---------|B|
                                      | car.name|A|
                                      |---------|R|
                                      | car.name| |
                                       ---------|_|

代码：

汽车
@foreach（Model.car中的var car）{@*其中#隐藏列表获取其内容*@
@车，名字
}
var hoverEle=document.getElementById（“HoverMe”）；
var popupEle=document.getElementById（“隐藏”）；
hoverEle.addEventListener（'mouseover'，函数（）{
var hoverRect=hoverEle.getBoundingClientRect（）；//获取悬停元素的位置
popupEle.style.left=（hoverRect.right+16）+“px”；
popupEle.style.top=hoverRect.top+“px”；
popupEle.style.display=“block”；
}，假）；
hoverEle.addEventListener（'mouseout'，函数（）{
popupEle.style.display=“无”；
}，假）；

（顺便说一句，这个问题被标记为

jQuery

，但实际上您使用的只是香草JS！当然没问题，只是让您知道！）

你肯定走对了路。我想你可以设置一个超时并清除它

<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>


<script>
    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(); 
        }, 5000);
    }, false);

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

    popEle.addEventListener('mouseout', function () {
        hidePopup();
    }, false);

</script>

汽车
@foreach（Model.car中的var car）{@*其中#隐藏列表获取其内容*@
@车，名字
}
var hoverEle=document.getElementById（“HoverMe”）；
var popupEle=document.getElementById（“隐藏”）；
var-timeoutId；
函数showPopup（）{
var hoverRect=hoverEle.getBoundingClientRect（）；//获取悬停元素的位置
popupEle.style.left=（hoverRect.right+16）+“px”；
popupEle.style.top=hoverRect.top+“px”；
popupEle.style.display=“block”；
}
函数hidePopup（）{
popupEle.style.display=“无”；
}
hoverEle.addEventListener（'mouseover'，函数（）{
showPopup（）；
}，假）；
hoverEle.addEventListener（'mouseout'，函数（）{
timeoutId=window.setTimeout（函数（）{
hidePopup（）；
}, 5000);
}，假）；
popupEle.addEventListener（'mouseover'，function（）{
if（超时ID）{
clearTimeout（timeoutId）；
}
}，假）；
popEle.addEventListener（'mouseout'，函数（）{
hidePopup（）；
}，假）；

您可以安排隐藏操作，而不是使用

setTimeout

将鼠标悬停在触发器或popover元素外立即隐藏popover，并在再次悬停在触发器或popover上时取消它

window.onload=函数（）{
var triggerEl=document.querySelector（'.trigger'）；
var popoverEl=document.querySelector（'.popover'）；
var-hideTimer=null；
triggerEl.addEventListener（'mouseover'，function（）{
showPopover（）；
}，假）；
triggerEl.addEventListener（'mouseout'，函数（）{
scheduleHidingPopover（）；
}，假）；
popoverEl.addEventListener（'mouseover'，function（）{
取消隐藏Popover（）；
}，假）；
popoverEl.addEventListener（'mouseout'，函数（）{
scheduleHidingPopover（）；
}，假）；
函数showPopover（）{
取消隐藏Popover（）；
popoverEl.classList.remove（“隐藏”）；
}
函数hidepover（）{
取消隐藏Popover（）；
popoverEl.classList.add（“隐藏”）；
}
函数scheduleHidingPopover（）{
取消隐藏Popover（）；
hideTimer=setTimeout（函数（）{
hidepover（）；
hideTimer=null；
}, 1000);
}
函数cancelHidingPopover（）{
如果（隐藏者）{
clearTimeout（hideTimer）；
hideTimer=null；
}
}
};
.trigger{
显示：内联块；
垂直对齐：顶部；
背景色：#eef；
}
波弗先生{
显示：内联块；
垂直对齐：顶部；
背景颜色：#费用；
最大高度：100px；
溢出：自动；
}
.隐藏{
显示：无！重要；
}
悬停在我身上
我会过来的。

同侧眼底

同侧眼底

同侧眼底

同侧眼底

同侧眼底

同侧眼底

同侧眼底

谢谢！哦，我真的以为这是JQuery。我去掉了标签JQuery:），但你知道如何定制滚动条的好指南吗？我找不到任何引导或相关解决方案没有问题！如果您不知道的话，它是一个试图向Javascript添加一些不错的扩展并处理跨浏览器支持的库。这是一个很好的工具，但是vanilla JS技能也很有价值，所以你不需要使用它。至于自定义滚动条，有一个StackOverflow可以很好地概括CSS可以实现的功能——除此之外，你可能还需要一个Javascript/jQuery选项——检查这个StackOverflow的一些出发点。嗯，我很难将这个JS转换成JQuery。读了一些书之后，我认为JQuery是一种方式，“少写，多做”。您是否有可能提供额外的JQuery解决方案？我将添加一个新问题。我添加了jQuery版本，并做了一些小的澄清。
<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>


<script>
    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(); 
        }, 5000);
    }, false);

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

    popEle.addEventListener('mouseout', function () {
        hidePopup();
    }, false);

</script>