在 iPad 上单击“悬停”效果（类似于 SO）
Posted
技术标签:
【中文标题】在 iPad 上单击“悬停”效果（类似于 SO）【英文标题】："hover" effect using single tap on iPad (similar to SO) 【发布时间】：2011-10-08 03:48:36 【问题描述】：如果您曾经在 iPad 上使用过 ***，您可能已经注意到，为了删除评论，您：
先点评论区 该字段以灰色突出显示，删除图标以灰色显示 然后您可以点击图标删除评论在桌面上，此过程更简单，因为鼠标可以悬停在评论上，通过 jQuery .css 隐藏并使图标在 mouseenter 和 mouseleave 上可见。
我已经在我的博客上搭建了一个posts和cmets系统，这个功能和SO在桌面上运行非常相似，但是我想知道如何实现SO的iPad功能。
任何想法 SO 如何使单击充当 cmets 上的悬停？
【问题讨论】：
为了呼应Cory，我认为 ios（或者，更确切地说是Mobile Safari）在很多情况下会自动处理这个问题。关键是找到它为您自动处理转换的特定情况。 【参考方案1】：每当我在 jQuery 或 Mootools 中编写任何响应 mouseenter 的代码时，iPad 都会立即将此行为转换为单击。这包括通常单击即可将您带到另一个页面的链接。这不是您看到的行为吗？
【讨论】：
好点@cory，我刚刚再次检查并注意到当我点击 cmets 容器（我用它来触发 mouseenter 上的图标可见性）时没有任何反应。但是如果我点击该容器中的一个不相关的链接（例如，“添加评论”，类似于 SO），那么图标就会出现——也许我需要在我的代码中进行更改【参考方案2】：使用 jQuery 你可以编写一个点击事件：
$(".comment").click(function(e)
e.preventDefault();
$(this).toggleClass("clicked");
);
然后像这样创建一些iPad-only CSS：
.comment .delete
display: none;
.comment.clicked .delete
display: inline;
如果您的 html 是这样的，这将起作用：
<div class="comment">... <a class="delete">Delete</a></div>
并将它们连接到它们自己的 ipad.css 和 ipad.js 文件中，并将它们包含在您的 <head>
<!--[if iPad]>
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" />
<script type="text/javascript" src="ipad.js"></script>
<![endif]-->
工作示例：http://jsfiddle.net/hunter/pqLXS/
【讨论】：
thx @hunter - 现在的问题是，在桌面上我需要你的示例中的红色删除来显示悬停（鼠标输入） - 我已经实现了 - 但在 iPad 上“删除”需要在点击时显示 - 知道如何使您的示例适应这一点吗？以上是关于在 iPad 上单击“悬停”效果（类似于 SO）的主要内容，如果未能解决你的问题，请参考以下文章