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

Posted 2023-05-08

【中文标题】JQuery Mobile 1.4 如何在移动设备上禁用悬停效果

【英文标题】：JQuery Mobile 1.4 How to Disable Hover Effect on Mobile Devices

【发布时间】：2014-05-20 13:07:51

【问题描述】：

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

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

【问题讨论】：

您可以使用网络检查器查看“悬停”触发了哪个属性吗？可能是背景颜色更改或 CSS 过滤器？

当我将鼠标悬停在它上面时，我没有看到任何变化。我只看到（例如）<a class="home_item ui-btn ui-btn-icon-right ui-icon-carat-r" id="home_settings" href="#settings" data-ajax="false">Support</a> 按钮悬停是使用 .ui-btn:hover 为 Themeroller 生成的 CSS 文件中的每个样本设置的。我可以通过使悬停颜色与正常颜色相同来全局禁用它，但我正在寻找每个小部件的解决方案。

这似乎是一个蹩脚的答案，但你能把所有悬停效果移到@media 查询中，比如@media (min-width:1024px)？我知道这不是万能的，你说你不想修改 CSS，但这是我所知道的最快的方法。

【参考方案1】：

看起来可能触发了一个 jquery 悬停事件或 mouseover 以将交互状态设置为“.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？

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

【参考方案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*/;