4

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

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

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

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

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

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

4

1 回答 1

9

您可能知道这一点，但: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");
     }); 
});
于 2013-05-29T13:39:14.953 回答