Question

我在CSS菜单中有一个带有HTML选择表单的css下拉菜单。我注意到，仅在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();
});

Answer 1

经过一些故障排除后，我决定摆脱jQuery悬停事件，因为没有任何动画并只用a：hover控制CSS菜单。这照顾了firefox的问题。

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

Answer 2

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

新的CSS伪类:focus-within可以帮助解决这类问题，并在人们使用Tab键进行导航时提供可访问性，在使用屏幕阅读器时很常见。

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

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

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

在CSS菜单中选择表单，失去CSS下拉列表的焦点

2 个答案: