jQueryMobile中的Hover效果在触摸后仍会保持

Question

我正在使用jQueryMobile和PhoneGap为移动设备开发应用程序。其中包含搜索图标，我希望在用户触摸它时给它一个悬停效果。

我通过CSS实现了这个效果：

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

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

现在的问题是触摸后悬停效果仍然存在。我希望它的行为像鼠标移入和移出一样。在这种情况下，即使没有触摸到那部分，效果仍然存在。

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

- Never Quit

---

提供一些 HTML。图标在哪里？如何添加？创建一个简短的 jsFiddle 示例。 - Gajotres

我认为移动设备不支持“hover”，请尝试使用“focus”。 - Morpheus

你如何在触摸屏上悬停？！？ - Ron van der Heijden

Answer 1

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

虽然它在移动设备上得到了实现，但在iOS设备上存在极大的漏洞。另一方面，您不能使用:focus，因为它只能用于支持焦点的元素，所以a标签和按钮已被淘汰。同样，在移动设备上也不能使用: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");
     }); 
});

- Gajotres