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

Question

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

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

Answer 1

看起来可能有一个 jquery 悬停事件或鼠标悬停被触发以将交互状态设置为“.ui-state-hover”或“.state-hover”之类的东西

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 的绑定(bind)？

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