我正在使用悬停效果通过 CSS 显示或隐藏子菜单。在 Google Chrome 版本 56 之前，它工作得很好。但是，对于新版本(版本 56.0.2924.76(64 位))，如果您的子菜单有滚动条并且您将鼠标移到滚动条上，悬停效果就会结束。这有什么新东西吗？
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
display: none;
border: 1px solid silver;
width: 200px;
height: 100px;
overflow: auto;
}
li:hover > .wrapper {
display: block;
}
</style>
</head>
<body>
<ul>
<li>
Options
<ul class="wrapper">
<li>Sub</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
<li>Sub 5</li>
<li>Sub 6</li>
<li>Sub 7</li>
<li>Sub 8</li>
<li>Sub 9</li>
</ul>
</li>
</ul>
</body>
</html>最佳答案
下面是问题的更好演示:
.wrapper {
/*display: none;*/
border: 1px solid silver;
width: 200px;
height: 100px;
overflow: auto;
background: #C55;
}
li:hover > .wrapper {
background: #5C5;
}<ul>
<li>
Options
<ul class="wrapper">
<li>Sub</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
<li>Sub 5</li>
<li>Sub 6</li>
<li>Sub 7</li>
<li>Sub 8</li>
<li>Sub 9</li>
</ul>
</li>
</ul>我能看到绕过它的唯一方法是使用自定义的 webkit 滚动条。使用 ::-webkit-scrollbar、::-webkit-scrollbar-track 和 ::-webkit-scrollbar-thumb。这不是最好的解决方案，但如果它是一个临时错误，它可能会阻止你直到他们修复它。
.wrapper {
/*display: none;*/
border: 1px solid silver;
width: 200px;
height: 100px;
overflow: auto;
background: #C55;
}
li:hover > .wrapper {
background: #5C5;
}
::-webkit-scrollbar {
background: rgba(0,0,0,0.1);
width: 10px;
}
::-webkit-scrollbar-thumb{
background-color:rgba(255,255,255,0.8);
border-radius:10px;
}<ul>
<li>
Options
<ul class="wrapper">
<li>Sub</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub 4</li>
<li>Sub 5</li>
<li>Sub 6</li>
<li>Sub 7</li>
<li>Sub 8</li>
<li>Sub 9</li>
</ul>
</li>
</ul>关于html - CSS hover with chrome 56 上的显示 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41963235/