"hover" effect using single tap on iPad (similar to SO)_问答_开发者

"hover" effect using single tap on iPad (similar to SO)

开发者 https://www.devze.com 2023-03-21 19:20 出处：网络

If you\'ve ever used StackOverflow on the iPad, you may have noticed that in order to delete a comment, you:

If you've ever used StackOverflow on the iPad, you may have noticed that in order to delete a comment, you:

first tap the comment field
the field gets highlighted in gray and the delete icon appears in gray
you can then tap on the icon to delete the comment开发者_StackOverflow社区

On a desktop, this process is more straightforward because the mouse can hover over the comment, hiding and making the icon visible on mouseenter and mouseleave via jQuery .css.

I have already set up a posts and comments system on my blog that has this functionality very similar to SO running on a desktop, but I wonder how to achieve SO's iPad functionality.

Any ideas how SO makes the single tap act as a hover on the comments?

Any time I have coded anything that responds to mouseenter in jQuery or Mootools, the iPad immediately converted this behavior to a single click. This includes links that would normally take you to another page on a single click. Is this not the behavior you are seeing?

using jQuery you could write a click event:

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

And create some iPad-only CSS like this:

.comment .delete
{
    display: none;
}

.comment.clicked .delete
{
    display: inline;
}

which would work if your html was something like this:

<div class="comment">... <a class="delete">Delete</a></div>

and wire up these into their own ipad.css and ipad.js files and include them in your <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]-->

working example: http://jsfiddle.net/hunter/pqLXS/