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

Question

我正在开发用于移动设备的jQueryMobile的phonegap应用程序.我在其中搜索图标.我想在用户触摸时为该图标添加悬停效果.

我通过css实现了这个目标:

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

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

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

手指脱落后如何去除悬停效果？

Answer 1

您可能知道这一点但: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");
     }); 
});