在iPad上使用单击"hover"效果(类似于SO)

如果你曾经在iPad上使用过StackOverflow，你可能已经注意到，为了删除评论，你:

首先点击评论栏
字段以灰色突出显示，删除图标以灰色出现
你可以点击图标删除评论

在桌面上，这个过程更直接，因为鼠标可以悬停在评论，隐藏和使图标可见的mouseenter和mouseleave通过jQuery .css。

我已经在我的博客上建立了一个帖子和评论系统，它的功能非常类似于SO在台式机上运行，但是我想知道如何实现SO在iPad上的功能。

有人知道SO如何使单个点击作为悬停在评论上吗?

每当我在jQuery或Mootools中编写任何响应mouseenter的内容时，iPad都会立即将此行为转换为一次点击。这包括通常一次点击就能把你带到另一个页面的链接。这不是你所看到的行为吗?

使用jQuery可以编写一个点击事件:

$(".comment").click(function(e){
    e.preventDefault();
    $(this).toggleClass("clicked");
});

并创建一些仅适用于ipad的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/

相关内容

最新更新

热门标签：