Question

我有一个奇怪的问题。在我编码的其中一个网站上，我使用css hover命令将下拉菜单附加到按钮。众所周知，在移动设备上，悬停命令会转换为点按。问题在于，无论我做什么，我都无法通过iOS Safari来注册点击，只能在iOS Safari中无法访问整个下拉菜单。它适用于iphone上的chrome，适用于所有桌面浏览器。有什么想法吗？

这是我的CSS：

/* Reserve Pull Down */

.reserve {
    font-size: 30px;
    color: white;
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 30px;
}

.reservetitle{
    color: white;
}

.reservedropdown {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
}

.reserve:hover .reservedropdown {
    display: block;
}

.reserve.active  .reservedropdown {
    display: block;
}

/ *预留下拉结束* /

这是我的HTML ....

<div class="reserve">  
        <a class="reservetitle">Reserve</a>
            <div class="reservedropdown">
                <a class="dropdowntext" href="reserve/index.html">By Location</a>
                <div class="dropdowngap"></div>
                <a class="dropdowntext" href="tel:+13014333005">Call Now</a>
            </div>
        </div>

有什么想法吗？我很难搞清楚它。我试过“：主动”，“：焦点”。当然，“：悬停”。无法在iOS Safari上工作。任何帮助，将不胜感激。干杯! -Julian

Answer 1

我能够通过略微调整你的HMTL来实现它的工作

http://codepen.io/bjornmeansbear/pen/wGdzMg

我只是确保<a class="reservetitle">Reserve</a>有href="" ... <a href="#" class="reservetitle">Reserve</a>

浏览器肯定会将其视为您单击/悬停的链接，然后一切正常。

：Hover Css菜单仅在iOS Safari上打开。

1 个答案: