JQuery Mobile 1.4如何在移动设备上禁用悬停效果

Question

我遇到类似this question中描述的问题，但是使用JQuery Mobile 1.4，尤其是列表视图。轻微点击不足以被视为点击会导致列表元素突出显示并保持突出显示：

有谁能告诉我如何防止在我的应用程序中悬停突出显示？我宁愿不必修改任何JQM主题CSS来执行此操作，但如果需要，我会这样做。

Answer 1

看起来可能有一个jquery悬停事件或鼠标悬停被触发以将交互状态设置为类似＆＃34; .ui-state-hover＆＃34;或＆＃34; .state-hover＆＃34;

<强> 1

jQueryUI - removing class on hover

<强> 2

function overPrevent(e){
    e.preventDefault();
    return false;
}

$(".options li").hover(overPrevent,outOption);

// alternative to above but still using JavaScript
$(".options li").click(function() {
    $(this).removeClass("ui-state-focus ui-state-hover");
}

 // alternative to above but still using JavaScript
 $(".options li").hover(function(e){
    $(this).removeClass("ui-state-hover");
});

或者可能与mouseenter和mouseleave解除绑定？

第3

$('.options  li').click(function(){
     $(this).unbind("mouseenter mouseleave");
})

或尝试纯css覆盖

<强> 4

.theme-group-header .state-default .corner-all .state-hover:hover{
   background:none;
}

还可以预先检测移动设备，例如这个小型图书馆 - http://detectmobilebrowsers.com/

然后你可以为你的css命名空间并用大致类似的东西覆盖jquery ui库：

.touch{
   .theme-group-header .state-default .corner-all .state-hover:hover{
       background:none;
   }
}

另见参考资料：

• http://trentwalton.com/2010/07/05/non-hover/
• jQueryUI - removing class on hover
• http://tech.vg.no/2013/04/10/hover-state-on-touch-devices/
• The issue with the "ui-state-hover" effect
• Jquery hover function and click through on tablet
• jQuery UI button not "unclicking"
• http://api.jqueryui.com/theming/css-framework/
• mobile safari links retains focus after touch
• http://detectmobilebrowsers.com/
• https://github.com/kof/remove-hover

Answer 2

为了防止在jQuery Mobile 1.4 Listview中进行任何悬停突出显示，您可以根据您使用的样本覆盖相应的CSS：

/* Button hover */
#yourList.ui-group-theme-a .ui-btn:hover {
    background-color: #f6f6f6 /*{a-bhover-background-color}*/;
}
/* Button down */
#yourList.ui-group-theme-a .ui-btn:active {
    background-color: #e8e8e8 /*{a-bdown-background-color}*/;
}