下拉菜单在悬停时消失（Firefox）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了下拉菜单在悬停时消失（Firefox）相关的知识，希望对你有一定的参考价值。
我有一个按钮而不是悬停有一个与之关联的下拉菜单。这在chrome上工作得非常好，我可以从下拉列表中选择项目，但在Firefox上，当我离开按钮点击下拉项目时，下拉消失的行为是不同的。
这是我的CSS和附带的JS小提琴。
button {
position:relative;
}
.flags_home_middle {
top: 68%;
right: 23%;
left: inherit;
}
.flags_item_features {
-webkit-transition-duration: .8s;
transition-duration: .8s;
opacity: 0;
visibility: hidden;
padding: 3px !important;
width: 211px;
position: absolute;
top: 51%;
left: 23%;
}
.flags_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flags_home_middle {
top: 68%;
right: 23%;
left: inherit;
}
.flags_item_features {
-webkit-transition-duration: .8s;
transition-duration: .8s;
opacity: 0;
visibility: hidden;
padding: 3px !important;
width: 211px;
position: absolute;
top: 51%;
left: 23%;
}
.flags_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.btn_buy_features:hover .flags_item_features {
opacity: 1;
visibility: visible;
background: #EBEBEB;
box-shadow: 0 3px 9px -2px rgba(0, 0, 0, .5);
}
答案
在我看来，Firefox在使用悬停时不会考虑具有新堆叠上下文的交互元素的子元素。为了克服这个问题，我将整个菜单放在按钮旁边，让你的容器充当亲戚父母。我还使用伪元素增加了安全区。
https://jsfiddle.net/3nn7pc21/4/
button {
position:relative;
}
.buy-button-wrapper
{
position: relative;
}
.flags_home_middle {
top: 68%;
right: 23%;
left: inherit;
}
.flags_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flags_home_middle {
top: 68%;
right: 23%;
left: inherit;
}
.flags_item_features {
-webkit-transition-duration: .8s;
transition-duration: .8s;
opacity: 0;
visibility: hidden;
padding: 3px !important;
width: 211px;
position: absolute;
top: 10px;
left: 10px;
}
.flags_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.btn_buy_features:hover + .flags_item_features,
.flags_item_features:hover
{
opacity: 1;
visibility: visible;
background: #EBEBEB;
box-shadow: 0 3px 9px -2px rgba(0, 0, 0, .5);
}
.flags_item_features:before
{
content: "";
display: block;
position: absolute;
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
}<div class="buy-button-wrapper">
<button type="button" class="btn-buy btn_buy_features custom_btn active" style="margin: 0 auto;">BUY</button>
<div class="flags_item flags_item_features flags_home_middle">
<div class="border_link">
<span class="country_name"> <a href="http://shop-us.foobot.io/cart/add?id=8739494597" class="flag_lins"><img src="/wp-content/uploads/2017/01/1_2_2.png">US</a></span>
</div>
<div class="border_link">
<span class="country_name"> <a href="http://shop-eu.foobot.io/cart/add?id=8346318915" class="flag_lins"><img src="/wp-content/uploads/2017/01/1_2_3.png">EU</a></span>
</div>
<div class="border_link">
<span class="country_name"> <a href="http://shop-eu.foobot.io/cart/add?id=8819215683" class="flag_lins"><img src="/wp-content/uploads/2017/01/1_2_1.png">UK</a></span>
</div>
</div>
</div>以上是关于下拉菜单在悬停时消失（Firefox）的主要内容，如果未能解决你的问题，请参考以下文章