css - CSS 可悬停下拉菜单不会在移动设备上关闭

问题描述

我已经实现了一个可悬停的下拉菜单，就像 w3schools 的这个例子一样：

https://www.w3schools.com/howto/howto_css_dropdown.asp

在我的 PC 上它运行良好，但我在装有 iOS 12.1.2 的 iPhone 上尝试了该页面并显示了菜单，但是当我触摸菜单外的某些内容时它不会消失，即使它是打开菜单的按钮. 它在 Safari Mobile 和 Chrome for iOS 上进行了测试。

我尝试了这个实现，但没有任何改变：

移动下拉菜单不会消失

我的结构是这样的：

<div class="mobile__nav-wrapper>
  <button type="button" class="mobile__nav-button"></button>
  <div class="mobile__nav-content">
    <a href="home">Home</a>
    <a href="page">Page</a>
  </div>
</div>

我已经尝试过这样的实现（index.gif=tested.gif）：

<div class="mobile__nav-wrapper>
  <button type="button" class="mobile__nav-button"></button>
  <div class="mobile__nav-content">
    <a href="home">Home</a>
    <a href="page">Page</a>
  </div>
  <img class="close" src="img/index.gif" />
</div>

这是我的 CSS：

.mobile__nav-wrapper{
    display: inline-block;
    position: absolute;
    top:1.6em;
    right: 0.2em;
    font-size: 1rem;
}
@-webkit-keyframes mobile__nav__btn-animation{
    0%   {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    25%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    50%  {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    75%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
@keyframes mobile__nav__btn-animation{
    0%   {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    25%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    50%  {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    75%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
.mobile__nav-btn{
    font-size: 1rem;    
    border: none;
    outline: none;
    color: #575757;
    padding: 0.50em 0.70em;
    background-color: rgba(244,244,244,0.95);
    font-family: inherit;
    margin: 0;
    border-radius: 3px;

    -webkit-animation-name: mobile__nav__btn-animation;

            animation-name: mobile__nav__btn-animation;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.mobile__nav-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: rgba(255,255,255,0.8);
    -webkit-box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
            box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
    line-height: 2em;
    font-size: 1.3em;
}
.mobile__nav-content a{
    color: #575757;
    background-color: rgba(255,255,255,0.8);
    text-decoration:none;
    display: block;
    padding-left: 0.5em;
    margin-left: -100vw;
}
.mobile__nav-content a:hover{
    background-color: rgba(163,183,108,0.85);
}
/*--------for the safari mobile browser----------*/
div img.close {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

div .mobile__nav-wraper:hover + img {
  display: block;
}
/*-------end of the safari mobile browser----------*/
.mobile__nav-wrapper:hover .mobile__nav-content{
    display: block;
}

在不使用 JS 的情况下如何实现这一点？或者这是绝对必要的？

-----更新----正如Viira所要求的，这是一个JSFiddle：

https://jsfiddle.net/9ymj80hw/1/

标签： cssresponsive

css - CSS 可悬停下拉菜单不会在移动设备上关闭

问题描述

解决方案

推荐阅读