마우스를 올리면 드롭 다운 메뉴가 사라집니다 (Firefox)

Question

호버 위에있는 버튼보다 연관된 버튼이 있습니다. 이것은 크롬에서 완벽하게 작동하며 드롭 다운에서 항목을 선택할 수 있지만 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); 
} 

는

https://jsfiddle.net/3nn7pc21/

Answer 1

이 호버를 사용하는 경우 파이어 폭스는 새로운 스택 문맥과 상호 작용하는 요소의 아이를 생각하지 않는 날 것으로 보인다. 이것을 극복하기 위해 버튼 옆에 전체 메뉴를 놓고 컨테이너를 상대 부모로 제공했습니다. 또한 의사 영역을 사용하여 안전 영역을 조금 늘렸습니다.

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>