Question

我在Chrome中有奇怪的错误，而我在 firefox 中进行了测试，它运行正常。

问题是将display: block元素放在其中的悬停元素，当有溢出滚动时，如果将鼠标悬停在滚动上，隐藏元素将消失。在Firefox中，没关系。

Chrome version: 56.0.2924.87

错误的再现，将鼠标悬停在滚动条上以自行重现：

.on_hover {
  border: 1px solid red;
  position: relative;
}
.hidden_block {
   display: none;
   width: 200px;
   height: 200px;
   position: absolute;
   top: 15px;
   left: 0px;
   border: 1px solid #ccc;
}
.hidden_block .overflow_block {
   position: relative;
   width: 100%;
   height: 160px;
   max-height: 160px;
   overflow-y: auto;
   overflow-x: hidden;
   border: 1px solid blue;
}

/* On hover display hidden block: */
.on_hover:hover .hidden_block {
  display: block;
}

<div class="on_hover">
  Hover me
  <div class="hidden_block">
      <div class="overflow_block">
          <p>Test the content overflow</p>
          <p>Test the content overflow</p>
          <p>Test the content overflow</p>
          <p>Test the content overflow</p>
          <p>Test the content overflow</p>
          <p>Test the content overflow</p>
          <p>Test the content overflow</p>
          <p>Test the content overflow</p>
          <p>Test the content overflow</p>
          <p>Test the content overflow</p>
          <p>Test the content overflow</p>
      </div>
  </div>
</div>

任何人都有解决方案吗？

谢谢大家

Answer 1

适用于Chrome 55.0.2883.75，Windows 10。更新到56.0.2924.87后，它无法正常工作。我想这是Chrome版本56的错误，有必要向Google报告！

CSS悬停＆amp;滚动错误CHROME - 如果滚动条悬停，则父元素消失

1 个答案: