在 jQueryMobile 中触摸后悬停效果保持不变答案

【问题标题】：Hover effect stays after touch in jQueryMobile在 jQueryMobile 中触摸后悬停效果保持不变
【发布时间】：2013-05-24 17:40:36
【问题描述】：

我正在使用 jQueryMobile 在 phonegap 中开发应用程序，仅适用于移动设备。我在其中搜索图标。当用户触摸它时，我想在该图标上赋予悬停效果。

我已经通过 css 实现了这一点：

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

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

现在的问题是这种悬停效果在触摸后仍然存在。我想要mousein和mouseout这样的行为。在这种情况下，即使那部分没有接触，效果也会保持不变。

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

【问题讨论】：

为我们提供一些 HTML。什么图标，在哪里，如何？创建一个简短的 jsFiddle 示例。
我觉得手机不支持hover，试试focus吧
如何将鼠标悬停在触摸屏上？！？

标签： javascript css jquery-mobile hover

【解决方案1】：

您可能知道这一点，但 :hover 在触摸屏设备上不存在。因此，当您设计一个响应式网站时，您应该仔细计划何时何地使用 :hover 交互。

虽然它是在移动设备上实现的，但它的漏洞非常多，主要是在 iOS 设备上。另一方面，您不能使用 :focus 因为它只能用于支持焦点的元素，因此排除了标签和按钮。此外，:active 不能在移动设备上使用。

在这种情况下，我们可以使用 jQuery 来解决这个问题。

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

在此示例中，我使用了 vmousedown、vmouseup 和 vmousecancel 事件，因此我可以在桌面上进行测试 /移动设备等。只需将它们替换为 touchstart、touchend 和 touchcancel。

touchcancel / vmousecancel 是必需的，因为有时按钮可以保持按下状态。

代码：

$(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");
     }); 
});

【讨论】：