34

我的导航很简单。我有一个悬停状态，它为某些文本添加了边框和透明渐变 png 背景，还有一个附加类，当由 jQuery 添加时，它在透明图像后面添加颜色。

如果您在 Web 浏览器中单击以切换类，您会看到颜色进出，但如果您从不将鼠标从按钮上移开，则背景图像会保留。这是预期的行为。

我的问题是，当使用 iPad 时，触摸似乎保持悬停状态，并且 :hover 属性永远不会消失，除非您单击另一个按钮，在这种情况下，持久性 :hover 属性会添加到该按钮，直到按下另一个按钮。

我无法想象我是第一个遇到这个问题的人，但是搜索没有发现任何问题。

帮助？

在此处输入图像描述

正常 - 悬停 - 活动（通过 addClass() ）

4

8 回答 8

20

如果您使用的是 Modernizr，则非触摸类将添加到非触摸设备的根 html 元素中。然后你可以这样做：

a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}
于 2014-04-01T20:42:17.783 回答
16

Hover 是一个 CSS 伪类，旨在使用指针而不是触摸事件。您通常希望完全避免使用悬停，因为它在移动设备上毫无意义。处理此问题的最简单方法之一是将悬停 CSS 放在媒体查询中。您可以通过定位平板电脑或桌面屏幕来做到这一点，这里有两种解决方案：

1- 针对 iPad：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    RE.no-touch .my-element:hover {
         /* in here you cancel all hover styles you applied for desktop */ 
    }
}

2- 针对桌面：

@media only screen 
and (min-width : 1224px) {
    RE.no-touch .my-element:hover {
         /* in here you apply hover styles that will only work on desktop */ 
    }
}

无论哪种方式都是有效的。如果您注意到 CSS 在某些设备中被错误触发，您可以更改最小和最大宽度的值。

于 2013-07-29T15:31:11.357 回答
7

这是一篇旧帖子，但我在 2019 年的今天一直在努力解决这个问题，我找到了这个干净的解决方案，我想与大家分享。

<a href="#">Try hovering over me!</a>

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

基本上我们在这里所做的是在任何具有指针机制的设备中使用悬停。现在有一些带有 html 阅读器的软件可以更好地访问网站，这不应该是一个好主意，停用所有移动设备的 :hover。需要明确的是，任何没有指向机制的设备悬停都不会生效，否则我们应用了 :hover 样式。

于 2019-08-08T19:59:12.920 回答
3

这就是我通过悬停为我的列表修复它的方式：

CSS：

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery：

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

并修复了悬停在后退按钮导航上的问题...

<body onunload="$('a').blur();">

或者

$(window).unload( function () { $('a').blur(); } );

对于初学者来说，卸载事件发生在浏览器离开页面之前。通过在卸载时模糊页面中的所有链接，我能够解除悬停状态。使用后退按钮返回原始页面会显示默认状态下单击的链接。

不幸的是，onclick 事件似乎不会触发卸载，但在 iOS 5 中会刷新？！

卡住：悬停 - http://www.aaronpinero.com/articulated/2011/05/28/stuck-on-hover/ 使用 jQuery 替换 - http://www.nerdboy.co.uk/2009/01/使用 jquery-to-replace-body-onunload/

于 2012-09-10T10:09:13.977 回答
2

我也遇到过这个问题。我的问题出在 iPad 上，如果我点击锚点并稍微滚动，点击事件不会触发，但元素会保留悬停状态 CSS。我认为 iPad 实际上保留了焦点状态并应用 :hover CSS 样式来模拟桌面体验。

一个非 JS 且实用的解决方法是在不需要时不向触摸设备提供悬停样式。触摸设备没有“真正的”悬停状态，但是当元素被聚焦或点击并滚动时，它似乎是模拟悬停。

因此，加载了Modernizr.js后，我将悬停样式移到了 .no-touch 的范围内 -

IE

/* Only deliver hover styles to non-touch devices */
.no-touch .my-element:hover {
  /* hover styles */
}

然后，当单击该元素时，我将在其上切换一个活动类。

.my-element.active {
  /* active styles */
}

唯一的负面影响是你没有得到“被点击状态”。我还没有研究解决方案，因为它对我的应用程序并不重要。

于 2013-05-14T21:30:01.013 回答
1

您需要捕捉以下事件

touchstart - 当您的手指触摸屏幕时

touchend - 当你的手指离开屏幕时

考虑悬停和取消悬停，如果您可以发布一些代码，如果您不明白我在说什么，我们可以为您提供更多帮助

$('element').on('touchstart', function(){
    // apply hover styles, or better yet addClass() of hover styles
});

$('element').on('touchend', function(){
    // removeClass or remove styles, in here you set it to default so even if it is focused, it makes no difference
});

给出一些示例代码，touchstart和end应该可以解决问题

于 2012-05-17T20:51:42.443 回答
0

如果您使用的是 SCSS，我建议您执行以下操作：

// primary-buttons
.primary-button, .primary-button:visited,
.primary-button:focus {
    background: red;
    color: white;
}

.primary-button:hover {
    background: green; // Only for big screens
    @media(max-width: 768px) {
        background: red;
    }
}

如果您将背景的值重置为初始值，您将不再遇到在设备上按下按钮的问题 <= 768px 分辨率

于 2019-06-11T09:26:51.897 回答
-5

这是一种解决方法：

var btn = jQuery(".nav-menu ul li:first");
var btn_new = btn.clone(true);
btn.remove();
jQuery(".nav-menu ul").append(btn_new);
于 2014-09-16T14:36:00.680 回答