Question

我正在尝试使用HTML和CSS制作可滚动的下拉菜单。但是，当您将鼠标悬停在滚动条上时，菜单会消失。我一直试图解决这个问题一段时间没有结果。我猜测它与CSS有关。有什么想法吗？

＆＃13;

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
}

.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>
</div>

＆＃13;

Answer 1

虽然我无法明确解释为什么发布的代码无法跨浏览器工作（我无法找到任何失败的浏览器/操作系统组合），但我相信它可以改进

我将display替换为transform作为状态更改属性（以下说明）;
我在width上使用max-width代替.dropdown-content;
我删除了height: auto（它的臃肿）;
我向其添加了margin-bottom，因为它触及<body>的底部，因此box-shadow不会被切断。
根据@ Derek在评论中的建议，我会在:hover上添加:active，:focus和.dropdown的组合和.dropdown-content将保持下拉列表打开。这也将极大地提高基于触摸的设备的可用性。

除了不适合移动设备（触摸设备上没有:hover）之外，当前解决方案在具有窄或非常窄的滚动条的设备上受到影响，因为当指针仅离开元素时{{} 1}}，下拉列表消失了。

从我看来，这是一个主要的可用性问题。为了解决这个问题，我建议一个短暂的延迟，指针可以重新进入元素并重新激活1px状态，而不会关闭下拉列表。在下面的代码中，我使用:hover的延迟作为例证，这太过分了 - 好的（自然）值会介于.6s和.3s之间 - 根据自己的喜好进行调整

与普遍看法相反，这可以在不使用.4s的情况下实现，如果不使用JavaScript来切换下拉列表的状态，则可以使用动画属性，例如{{1}并且还将使用非常方便的display属性。

原则：

transform

示例：

＆＃13;

transition-delay

＆＃13;

.dropdown-content {
  transform: scale(0);
  transition: transform .0s linear .6s;
}

.dropdown:hover .dropdown-content {
  transform: scale(1);
  transition-delay: .0s;
}

＆＃13;

此方法的另一个净（和整洁）优势还可以为下拉列表的打开和关闭设置动画，这在使用.dropdown { position: relative; display: inline-block; } .dropdown-content { transform: scale(0); position: absolute; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); width: 160px; z-index: 1; max-height: 200px; margin-bottom: 24x; overflow-x: hidden; transition: transform .0s linear .6s; } .dropdown:hover>.dropdown-content, .dropdown:active>.dropdown-content, .dropdown:focus>.dropdown-content, .dropdown>.dropdown-content:hover, .dropdown>.dropdown-content:active, .dropdown>.dropdown-content:focus { transform: scale(1); transition-delay: .0s; }时是不可能的。

Answer 2

它适用于Firefox，但我认为min-width: 160px;，无width和overflow-x: hidden;的组合可能是其他浏览器的原因。尝试去除溢出-x - 无论如何它都没有效果（因为只有一个最小宽度，但实际宽度可以超出没有限制的那个）

将鼠标悬停在滚动条上时，下拉菜单消失

2 个答案: