在 CSS 菜单中选择表单失去 CSS 下拉菜单的焦点答案

【问题标题】：Select form within CSS menu losing focus of CSS dropdown在 CSS 菜单中选择表单失去 CSS 下拉菜单的焦点
【发布时间】：2011-12-19 23:18:25
【问题描述】：

我有一个 CSS 下拉菜单，该菜单中有一个 HTML 选择表单。我注意到，仅在 Firefox 中，当我悬停在 CSS 菜单上并单击选择下拉按钮时，整个 CSS 菜单失去悬停焦点，导致整个 CSS 菜单消失。有什么想法吗？

jsfiddle.net/chrisvenus/jKV8Z/1

<div class="popup-button">
 <div class="popup-container">
  <span class="popup-title">Title:</span>
   <select>
   <option value="Option 1">Option 1</option>
   <option value="Option 2">Option 2</option>
   <option value="Option 3">Option 3</option>
   <option value="Option 4">Option 4</option>
  </select>
 </div>
</div>


.popup-button {
    background: #000;
    float: left;
    padding: 6px 0 7px;
    position: relative;
    width: 148px;
}
.popup-container {
    background: none repeat scroll 0 0 #333333;
    color: #FFFFFF;
    display: none;
    left: 148px;
    padding: 20px;
    position: absolute;
    top: 0;
}


$('.popup-button').live('hover', function(){
 $(this).children('.popup-container').toggle();
});

【问题讨论】：

这不是一个真正的问题。您需要显示到目前为止的代码；否则我们只是猜测。
代码示例？ jsFiddle链接？链接到您的网站？在这一点上真的没有什么可以帮助的。
“下拉列表中的 HTML 选择元素”，真的吗？ :D A <select> 是一个下拉菜单。选择元素具有<option>s（映射到值）。
@Rob：如果它没有重新打开，那么您可能想用代码打开它作为一个新问题。链接到jsfiddle.net/chrisvenus/jKV8Z/1 也会很有用，这是您的代码的一个工作示例。 JSFiddle 是用于任何 HTML/CSS/JS 问题的有用工具，因为人们可以看到问题的直接示例并能够快速使用它来尝试解决方案。
@Chris：无论发生什么，重新发布问题都是个坏主意。没有获得重新投票的问题应该被标记为 mod 注意。

标签： php jquery html css forms

【解决方案1】：

经过一些故障排除后，我决定摆脱 jQuery 悬停事件，因为没有任何动画，并且只使用 :hover 来控制 CSS 菜单。这样就解决了 Firefox 问题。

.popup-button:hover .popup-container {
 display: block;
}

【讨论】：

【解决方案2】：

您现在可以在纯 CSS 中执行此操作，因此不需要 JavaScript。

新的 CSS 伪类 :focus-within 将有助于解决此类情况，并有助于提高人们使用制表符进行导航时的可访问性，这在使用屏幕阅读器时很常见。

.popup-button:focus-within .popup-container,
.popup-button:hover .popup-container {
  display: block;
}

:focus-within 伪类匹配自身的元素匹配 :focus 或具有匹配 :focus 的后代。

你可以查看哪些浏览器支持这个http://caniuse.com/#search=focus-within

【讨论】：