Question

我使用悬停效果来显示或隐藏带有CSS的子菜单。在谷歌浏览器的第56版之前，它工作得非常好。但是，对于新版本（Version 56.0.2924.76 (64-bit)），如果您的子菜单有滚动条并且您将鼠标移到滚动条上，则悬停效果将结束。这有什么新鲜事吗？

＆＃13;

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

＆＃13;

Answer 1

这里更好地证明了这个问题：

＆＃13;

.wrapper {
  /*display: none;*/
  border: 1px solid silver;
  width: 200px;
  height: 100px;
  overflow: auto;
  background: #C55;
}

li:hover > .wrapper {
  background: #5C5;
}

＆＃13;

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

＆＃13;

我能看到解决它的唯一方法是使用自定义的webkit滚动条。使用::-webkit-scrollbar，::-webkit-scrollbar-track和::-webkit-scrollbar-thumb。这不是最好的解决方案，但如果它是一个临时错误，它可能会阻止你直到修复它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这似乎是一个铬虫。尝试按如下方式修改UL线：

<强> EDITED 这段代码效果更好

<ul class="wrapper" onmouseenter="this.style.display='block';" onmouseleave="this.style.display='';">

它不是很干净但是有效

我最诚挚的问候！

CSS悬停在chrome 56上的显示块

2 个答案: