JS - 滚动悬停相关的div [英] JS - Scroll a hover-related div
问题描述
我有两个div，可以将鼠标悬停在 #HoverMe 上，以查看 #hidden div（当未悬停时隐藏）。如果列表有点长，它是可滚动的。但是，我不能滚动它，而我在悬停 #HoverMe div。如果我想滚动 #Hidden div，那么我必须移动，这会导致它再次消失（显然）。
我想要能够悬停 #HoverMe ，并有5秒钟移动到 #hidden 。如果您在消失前悬停 #hidden ，它将停止隐藏计时器，并能滚动并检查内容。
< 一个更糟糕的替代解决方案：
滚动 #Hidden #HoverMe ？
它的外观如下：
------------ --------- _
| #HoverMe | | #hidden | S |
------------ | -------- | R |
| car.name | O |
| --------- | L |
| car.name | L |
--------- | B |
| car.name | A |
| --------- | R |
| car.name | |
--------- | _ |
代码：
code>< div>
< div id =HoverMestyle =width：100px; background：green>
Car
< / div>
< div id =hiddenstyle =overflow：auto; height：100px; position：absolute; background-color：red; display：none>
@foreach（Model.Car中的var car）{@ * #hidden list获取其内容* @
< div> @ car.Name< / div>
}
< / div>
< / div>
< script>
var hoverEle = document.getElementById（HoverMe）;
var popupEle = document.getElementById（hidden）;
hoverEle.addEventListener（'mouseover'，function（）{
var hoverRect = hoverEle.getBoundingClientRect（）; //获取悬浮元素的位置
popupEle.style。 left =（hoverRect.right + 16）+px;
popupEle.style.top = hoverRect.top +px;
popupEle.style.display =block;
}，false）;
hoverEle.addEventListener（'mouseout'，function（）{
popupEle.style.display =none;
}，false）;
< / script>
（BTW，此问题标记为 jQuery 但你实际上只是使用了vanilla JS！没问题，当然，只是让你知道！）
重新在正确的轨道，肯定。我想你可以处理它设置超时并清除它。
< div>
< div id =HoverMestyle =width：100px; background：green>
Car
< / div>
< div id =hiddenstyle =overflow：auto; height：100px; position：absolute; background-color：red; display：none>
@foreach（Model.Car中的var car）{@ * #hidden list获取其内容* @
< 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（）; //获取悬停元素的位置
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>
I've a couple div that allow you to hover over #HoverMe in order to see contents in #hidden div(that's hidden when un-hovered). If the list is a bit to long, it's scrollable. However, I can't scroll it while I'm hovering #HoverMe div. If I want to scroll #Hidden div, then I've to move, which result it disappearing again(obviously).
I would like to be able to hover #HoverMe and have lke 5 seconds to move to #hidden. If you hover #hidden before disappearing, it will stop the hide timer and be able to scroll and check the contents.
A possible worse alternative solution:
scroll #Hiddendiv while mouse is at #HoverMe?
How it looks like:
------------ --------- _
| #HoverMe | | #hidden |S|
------------ | --------|R|
| car.name|O|
|---------|L|
| car.name|L|
---------|B|
| car.name|A|
|---------|R|
| car.name| |
---------|_|
Code:
<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");
hoverEle.addEventListener('mouseover', function () {
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";
}, false);
hoverEle.addEventListener('mouseout', function () {
popupEle.style.display = "none";
}, false);
</script>
(BTW, this question is labelled as jQuery but you're actually using just vanilla JS! No problem, of course, just letting you know!)
You're on the right track, for sure. I think you could probably handle it with setting a timeout and clearing it.
<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>
这篇关于JS - 滚动悬停相关的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
