gpt4 book ai didi

CSS 悬停和滚动错误 CHROME - 如果滚动条悬停,父元素就会消失

转载 作者:技术小花猫 更新时间:2023-10-29 11:24:38 26 4
gpt4 key购买 nike

<分区>

我在 chrome 中有一个奇怪的错误,而我在 firefox 中测试过它并且工作正常。

问题是悬停元素将 display: block 元素放在里面,当有溢出滚动时,如果你将鼠标悬停在滚动上,隐藏元素就会消失。在 Firefox 中没问题。

Chrome 版本:56.0.2924.87

bug重现如下,悬停滚动条自行重现:

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

有人有解决办法吗?

谢谢大家

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com