悬停 CSS 上的 iPad/iPhone 触摸事件

Posted 2023-03-14

【中文标题】悬停 CSS 上的 iPad/iPhone 触摸事件

【英文标题】：iPad/iPhone Touch Event on Hover CSS

【发布时间】：2011-10-05 00:42:25

【问题描述】：

我有一个像这样设置的简单菜单：

  <ul>
   <li>Item </li>
   <li>Item </li>
    <li>Item </li>
  </ul>

当您将鼠标悬停在计算机上的项目上时，它会显示其他 <ul> 和 <li> 项目正常。在 i 设备上，如果您触摸该项目，它不会做任何事情。我的第一个 <li> 有一个称为标志性作品的图像完美，但我不知道为什么它有效而其他人没有。

http://jsfiddle.net/5v9nc/

感谢您的帮助。

我试过这个：

http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

但这并没有帮助。请帮忙！我已经尝试了以下建议，但它不适用于我的小提琴示例。

【问题讨论】：

***.com/questions/3501586/…

@BNL 没用。我试过了。

您为什么不检查用户是否在移动设备上，如果是，您将悬停事件更改为点击事件？如果用户再次“点击”，则继续使用相同的代码。

【参考方案1】：

我知道了。添加

<a href='#'>(your menu header)</a>

到父 <ul> 中的所有 <li>。不需要 jQuery/JS。

【讨论】：

谢谢！它让我 4 岁的吸盘鱼钻头在 iPad 上工作得像冠军一样。

我用我的 android 手机（使用股票浏览器）尝试了有问题的 jsfiddle，它按预期工作。但是为了让它与 ios 一起工作，你还需要添加锚元素吗？当我添加<a href="#">....</a> 时，该菜单现在在标题与其元素之间存在间隙。您能否提供一个更新的 jsfiddle 来显示一个工作示例，仅供参考？

【参考方案2】：

我遇到了同样的问题，在查看了您的解决方案后，我尝试了一些非常简单但有效的方法，所以我想我会分享它。

为了重申这个问题，我有 CSS 菜单，将鼠标悬停在菜单项上会显示子菜单项。在没有悬停的 iPad 上，单击菜单项在某些情况下会显示子菜单，而在其他情况下则不会。

不管它在哪里不起作用，我只需将onclick="return true" 添加到<li>，然后它就起作用了。

【讨论】：

谢谢你！从那以后我就知道了，但我相信如果你在 中添加一个 ，它会起作用。我认为我的 html 错误，

【参考方案3】：

您可以尝试使用 touchstart 或 touchend，这可能是更好的方法，具体取决于您要完成的任务。

//ipad and iphone fix
// using jQuery 1.7.x (on method instead bind)
if ( (navigator.userAgent.match(/iPhone/i)) 
   || (navigator.userAgent.match(/iPod/i) ) 
   || (navigator.userAgent.match(/iPad/i))) 

      $(".menu li a").on('touchstart', function() 
           console.log("touch started");
      );
      $(".menu li a").on('touchend', function()
           console.log("touch ended");
      );

参考：http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

【讨论】：

没用。。我试过了。我的 ul 在我最上面的 li 显示中：无。在悬停时我有一个显示：块。

【参考方案4】：

Terraling 使用 onclick="return true" 的解决方案对我很有帮助。我通过在 JQuery 中使用一行将其添加到我的导航列表中的所有 li 元素使其更加优雅，这使原始 HTML 保持美观和整洁。在 iPhone 和 iPad 上的 iOS 5.1 上对其进行了测试。

$("ul#bars li").attr("onclick","return true");

【参考方案5】：

不需要 jquery 或 javascript。只需 html/css：

        <div id="header">
            <ul id="nav">
                <li><a href="something">something</a></li>
                <li><a href="something">something</a>
                    <div class="drop">
                        <ul>
                            <li><a href="something">something</a></li>
                            <li><a href="something">something</a></li>
                        </ul>
                    </div> <!-- /.drop -->
                </li>
                <li><a href="something">something</a></li>
                <li><a href="something">something</a></li>
            </ul>
        </div> <!-- /#header -->

以及控制它的 CSS：

.drop ul:after,
#nav:after

    content:'';
    display:block;
    clear:both;

#nav li

    position:relative;
    width:25%;
    float:left;
    padding:16px 0 0 0;
    background:url(../images/separator.gif) no-repeat;
    letter-spacing:1px;
    word-spacing: -1px;
    text-align:center;

#nav li:first-child,
#nav li.first-child

    background:none;

#nav a

    color:#E39916;
    padding:0 0 13px;
    display:block;

#nav a:hover

    color:#37ABD6;

#nav li:hover,
#nav li.hover

    position:relative;

#nav li:hover .drop .drop,
#nav li.hover .drop .drop

    display:none;

#nav li:hover .drop,
#nav li.hover .drop,
#nav li .drop li:hover .drop,
#nav li .drop li.hover .drop

    display:block;

#nav .drop li:hover .drop .drop,
#nav .drop li.hover .drop .drop

    display:none;

#nav .drop .drop li:hover .drop,
#nav .drop .drop li.hover .drop

    display:block;

.drop

    position:absolute;
    left:1px;
    top:50px;
    background-color:#E8F7FF;
    border:1px solid #fff;
    border-width:1px 1px 0;
    width:90%;
    min-width:115px;
    display:none;

.drop .drop

    left:95%;
    top:2px;
    z-index:9999;

.drop-left

    left:-95% !important;
    top:2px;
    z-index:9999;

.drop ul

    margin:0;
    padding:0;
    list-style:none;
    width:100%;

#nav .drop li

    margin:0;
    padding:0;
    background:none;
    font-size:13px;
    line-height:14px;
    border-bottom:1px solid #fff;
    float:left;
    width:100%;
    letter-spacing:1px;

#nav .drop li .drop li a,
#nav li .drop a

    text-decoration:none;
    background:none;
    display:block;
    color:#1C9CCB;
    padding:5px 5px 4px 5px;
    height:1%;

#nav .drop li .drop li a:hover,
#nav .drop li:hover a,
#nav .drop li.hover a,
#nav .drop a:hover

    background:#F9EFD1;
    color:#D88F0E;
    text-decoration:none;

#nav .drop .drop a

    padding-left:8px !important;

#main

    width:100%;
    overflow:hidden;
    margin:0 0 -391px;
    padding:10px 0 0 0;
    position:relative;

【参考方案6】：

HTML：

<ul>
  <li class="main_menu_item"><a href="/">Page</a></li>
  <li class="main_menu_item"><a href="/">Page</a>
    <ul class="sub_menu">
      <li><a href="/">Page</a></li>
    </ul>
  </li>
</ul>

jQuery:

$(document).ready(function() 
    if ( (navigator.userAgent.match(/iPhone/i)) 
    || (navigator.userAgent.match(/iPod/i) ) 
    || (navigator.userAgent.match(/iPad/i))) 
        $('.main_menu_item').bind('mouseenter', function(e) 
            $(this).find('.sub_menu').show();
            $(this).find('.sub_menu').css('visibility','visible');
        );
        $('.main_menu_item').bind('mouseleave', function(e) 
            $(this).find('.sub_menu').hide();
        );
    
);