悬停效果在jQueryMobile触摸后保持 [英] Hover effect stays after touch in jQueryMobile

问题描述

我是在phonegap中的developmentiong应用程序与jQueryMobile仅用于移动设备。其中我有搜索图标。

I'm developiong application in phonegap with jQueryMobile for mobile devices only. In which I've search icon. I want to give hover effect on that icon when user touchs it.

我已经通过css获取了这个图标：

I've achived this by css:

<a href="search.html" class="custom_header" >

    .custom_header:hover {
        background:url('../images/effect_glow.png') no-repeat center;

现在问题是这个悬停效果保持触摸后。我想要行为像mousein和mouseout。

Now the problem is this hover effect stays after touch. I want behaviour like mousein and mouseout. In this case effect stays even that part is not touching.

如何在手指离开后移除悬停效果？

How to remove hover effect after finger get off on it?

推荐答案

您可能知道这一点，但触摸屏设备上不存在 ：hover 。因此，当您设计自适应网站时，您应该仔细规划何时何地使用：hover interactions。

You maybe know this but :hover doesn’t exist on touch screen devices. So when you design a responsive website, you should carefully plan when and where to use :hover interactions.

虽然它在移动设备上实施， iOS设备。另一方面，您不能使用 ：focus ，因为它只能用于支持焦点的元素，因此不能使用标签和按钮。此外， ：active 不适用于移动设备。

While it is implemented on mobile devices it is extremely buggy, mostly on iOS devices. On the other end you cant use :focus because it can be used only on a elements that support focus so a tags and buttons are ruled out. Also :active is no go on mobile devices.

使用jQuery来解决这个问题。

In this case we can use jQuery to remedy this problem.

工作范例： http://jsfiddle.net/Gajotres/84Nug/

在本例中，我使用了 vmousedown code> vmouseup 和 vmousecancel 活动，以便在桌面设备/一样。只需使用 touchstart ， touchend 和 touchcancel 。

In this example I have used vmousedown, vmouseup and vmousecancel events so I can test it on desktop / mobile devices alike. Just replace them with touchstart, touchend and touchcancel.

touchcancel / vmousecancel 。

touchcancel / vmousecancel is needed because sometimes button can stay in pressed state.

代码：

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('touchstart','.custom_header' ,function(){
        $(".custom_header").css("background","url('http://www.cesarsway.com/sites/default/files/cesarsway-images/features/2012/March/Puppies-and-Exercise.jpg') no-repeat center");
    }).on('touchend', function(){
        $(".custom_header").css("background","red");
    }).on("touchcancel", function() {
        $(".custom_header").css("background","red");
     }); 
});

这篇关于悬停效果在jQueryMobile触摸后保持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！