Question

我有一个div，允许您将鼠标悬停在#HoverMe上，以便查看#hidden div中的内容（在未悬停时隐藏的内容）。如果列表有点长，它可以滚动。但是，当我将#HoverMe div移位时，我无法滚动它。如果我想滚动#Hidden div，那么我就会移动，这会导致它再次消失（显然）。

我希望能够悬停#HoverMe并等待5秒钟移至#hidden。如果您在消失之前悬停#hidden，它将停止隐藏计时器并能够滚动并检查内容。

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

当鼠标位于#Hidden时，

滚动#HoverMe div？

它看起来如何：

                      ------------     --------- _
                     |  #HoverMe   |  | #hidden |S|                           
                      ------------    | --------|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>


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

Answer 1

（顺便说一句，这个问题被标记为import numpy import Image as im image = im.open('1.tiff') ycbcr = image.convert('YCbCr') B = numpy.ndarray((image.size[1], image.size[0], 3), 'u1', ycbcr.tobytes()) im.fromarray(B[:,:,0], "L").show()，但你实际上只使用了香草JS！没问题，当然，只是让你知道！）

你肯定是在正确的轨道上。我想你可以通过设置超时并清除它来处理它。

jQuery

Answer 2

您可以使用setTimeout安排隐藏操作，而不是立即将鼠标悬停在您的触发器或弹出框元素的鼠标上，并在您将鼠标悬停在触发器上或再次弹出时取消它。

＆＃13;

window.onload = function () {
  var triggerEl = document.querySelector('.trigger');
  var popoverEl = document.querySelector('.popover');
  
  var hideTimer = null;
  
  triggerEl.addEventListener('mouseover', function () {
    showPopover();
  }, false);

  triggerEl.addEventListener('mouseout', function () {
    scheduleHidingPopover();
  }, false);
  
  popoverEl.addEventListener('mouseover', function () {
    cancelHidingPopover();
  }, false);
  
  popoverEl.addEventListener('mouseout', function () {
    scheduleHidingPopover();
  }, false);

  function showPopover() {
    cancelHidingPopover();
    popoverEl.classList.remove("hidden");
  }
  
  function hidePopover() {
    cancelHidingPopover();
    popoverEl.classList.add("hidden");
  }

  function scheduleHidingPopover() {
    cancelHidingPopover();
    hideTimer = setTimeout(function () {
      hidePopover();
      hideTimer = null;
    }, 1000);
  }
  
  function cancelHidingPopover() {
    if (hideTimer) {
      clearTimeout(hideTimer);
      hideTimer = null;
    }
  }

};

＆＃13;

.trigger {
  display: inline-block;
  vertical-align: top;
  background-color: #eef;
}
.popover {
  display: inline-block;
  vertical-align: top;
  background-color: #fee;
  max-height: 100px;
  overflow: auto;
}
.hidden {
  display: none !important;
}

＆＃13;

<div class="trigger">Hover over me</div>
<div class="popover hidden">
  I will pop over.<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
</div>

＆＃13;

jQuery版本：

＆＃13;

$(function () {
  var $triggerEl = $('.trigger');
  var $popoverEl = $('.popover');
  
  var hideTimer = null;
  
  $triggerEl.on('mouseover', function () {
    showPopover();
  });

  $triggerEl.on('mouseout', function () {
    scheduleHidingPopover();
  });
  
  $popoverEl.on('mouseover', function () {
    cancelHidingPopover();
  });
  
  $popoverEl.on('mouseout', function () {
    scheduleHidingPopover();
  });

  function showPopover() {
    cancelHidingPopover();
    $popoverEl.removeClass("hidden");
  }
  
  function hidePopover() {
    cancelHidingPopover();
    $popoverEl.addClass("hidden");
  }

  function scheduleHidingPopover() {
    cancelHidingPopover();
    hideTimer = setTimeout(function () {
      hidePopover();
      hideTimer = null;
    }, 1000);
  }
  
  function cancelHidingPopover() {
    if (hideTimer) {
      clearTimeout(hideTimer);
      hideTimer = null;
    }
  }

});

＆＃13;

.trigger {
  display: inline-block;
  vertical-align: top;
  background-color: #eef;
}
.popover {
  display: inline-block;
  vertical-align: top;
  background-color: #fee;
  max-height: 100px;
  overflow: auto;
}
.hidden {
  display: none !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="trigger">Hover over me</div>
<div class="popover hidden">
  I will pop over.<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
  Lorem ipsum<br>
</div>

＆＃13;

请注意，没有太多变化。这些变量以$符号为前缀，只是为了清除它们不再是DOM元素（如Vanilla JS示例中所示），而是jQuery包装器。 jQuery的强大之处在于简洁，方便（你可以使用JQuery包装器而不是使用DOM元素做更多的事情）和平滑浏览器的不兼容性（这个因素现在不如10年前jQuery上升时那么重要。）

JS - 滚动与悬停相关的div

2 个答案: