Question

我有一个相当典型的下拉标记，主要区别在于容器是一个按钮而不是div，这似乎是Firefox中问题的主要原因。该按钮包含一个列表，当我将鼠标悬停在按钮上时，列表显示正常。但是当我开始移动到下拉列表时，按钮上的悬停会停用。如果我使用DIV元素而不是BUTTON，那么它在两种浏览器中都能正常工作。这是我正在使用的代码（plnkr：plnkr.co）

<!--Using 'button': does not work in Firefox-->
<button class="button">
   button text: this doesn't work in Firefox but works in Chrome
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       ...
   </ul>
</button>

<!--Switching to 'div': works fine-->
<div class="button">
   switching to DIV: this works as expected
   <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       ...
   </ul>
</div>

相关CSS：

.button {
  position: relative;
}

.button > ul {
  display: none;
  position: absolute;
}

.button:hover > ul {
  top: 100%;
  left: 0;
  display: block;
}

如果有人可以帮我弄清楚Chrome和Firefox中这种行为有何不同，那就太棒了。

Answer 1

我不建议在按钮内使用ul。所以你可以做两件事来实现你的目标。

1 - 按钮后面的列表：

<!-- HTML -->
<button class="button">Button</button>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<!-- CSS -->
button+ul {
    display: none;
}
button:hover+ul {
    display: block;
}

这有效（check demo），但是你无法将鼠标悬停在ul上（你可能想要）。

2 - 将其包裹在div

中

<!-- HTML -->
<div class="buttonClass">
    <button>Button</button>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>
<!-- CSS -->
.buttonClass>ul {
    display: none;
}
.buttonClass:hover>ul {
    display: block;
}

这样（check demo），你可以将鼠标悬停在

上

Firefox：将鼠标悬停在下拉状态时，将鼠标悬停在按钮上会立即隐藏下拉列表

1 个答案: