我们在 iPad 上遇到悬停状态和 CSS 菜单的常见问题。因为它不识别悬停状态，所以不允许选择。
我们已经尝试了大多数常见的解决方法，例如 onClick="return true" 并使用 jQuery 创建一个动态悬停类来复制 :hover 和其他一些，我现在已经将其删除以稍微清理代码。我敢肯定我们遗漏了一些应该很明显的东西。
任何帮助我指出正确的方向将不胜感激。
链接：iar.suissamesser.com
【问题讨论】：
我已经能够在没有 Javascript 的情况下很好地工作。
CSS 的关键部分：
/* hide submenu by default */
.nav .submenu {
display: none;
}
/* show submenu on :hover and :focus-within */
.nav li:hover .submenu, .nav li:focus-within .submenu {
display: block;
}
要让:hover 在 iPad 上正常工作，您需要将tabindex 添加到您的顶级菜单项：
<ul class="nav">
<li tabindex="0">
Menu Item
<ul class="submenu">
<li>...</li>
</ul>
</li>
</ul>
然后为了能够关闭菜单，你还需要在<body>标签上添加一个tabindex：
<body tabindex="0">
这种方法的好处是它还允许键盘导航，并且有利于可访问性。
【讨论】：
我假设您在谈论菜单，对吗？在这种情况下，我所做的是在我的 css :hover 选择器中添加另一行。这个想法是这样的，点击时，向#nav 添加一个类，如'btn1。这还需要您在列表项中添加一个类。
CSS
#nav li:hover > ul,
#nav.btn1 li.btn1 > ul {
display: block;
}
HTML
<ul class="clearfix btn1" id="nav">
<li class="btn1"><a href="http://iar.suissamesser.com/about-us/campus">ABOUT US</a><br />
<ul>
<li><a href="http://iar.suissamesser.com/about-us/campus">Campus</a></li>
<li><a href="http://iar.suissamesser.com/about-us/history-mission">History & Mission</a></li>
</ul>
</li>
<li class="btn2"><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses" >PARENTS</a><br />
<ul>
<li><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses">Accreditation and Licenses</a></li>
JS
$("#nav > li > a").on("click", toggleNav);
var toggleNav = function(evt){
var clicked = $(this).parent().attr('class');
$("#nav").removeClass("btn1 btn2 btn3 btn4 ...").addClass(clicked);
evt.preventDefault();
}
【讨论】：
lis。然后，您可以在选择每个选项的父 ul#nav 中切换一个类。如果您只针对现代浏览器（仅适用于移动设备），您还可以使用一些 nth-child 选择器。
#nav 不应该有任何按钮类btn1。您在单击时切换它们。点击所做的只是切换class。
这是迟到迟到的回应，但是。
您实际上不必使用任何类型的 jquery 或代码，您只需在 css 中混淆或覆盖 ipad 逻辑即可。
在你的 CSS 中试试这个
.navigation li ul
{
display:none;
}
.navigation li:hover ul
{
display:block;
}
.navigation > li:hover
{
background-color:#000;
}
据我了解，这会阻止 ipad 级联到 li 并且您点击 a href 因为您在 li 上进行了悬停，但是，当子菜单打开时，a 成为下一个响应者，因为 li 已经有了悬停状态处于活动状态。
这是偶然发现的。
html 会是这样的
<ul class="navigation">
<li><a href="http://www.google.com">test link</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
<li><a href="#www.google.com">test link</a>
<li><a href="#www.google.com">test link</a>
</ul>
【讨论】：
在页脚文件中包含以下代码
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
e.stopPropagation();
}
【讨论】：
你应该看看这里的例子http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/
从那里开始非常简单。 祝你好运，
【讨论】：