Question

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

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

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

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

帮助？

enter image description here

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

Answer 1

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

a.myclass {
   color:#999;
}

.no-touch a.myclass:hover,
a.myclass:active {
   color:#ccc;
}

Answer 2

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，则可以更改最小和最大宽度的值。

Answer 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/use-jquery-to-replace-body-onunload/

Answer 4

我也遇到了这个问题。我的问题是在iPad上，如果我点击一个锚点并稍微滚动，点击事件不会触发，但该元素将保留悬停状态CSS。我的信念是iPad实际上保留了一个焦点状态，并应用：悬停CSS样式以模拟桌面体验。

非JS和实用的解决方法是，如果不需要，我们不会将悬停样式提供给触摸设备。触摸设备没有“真正的”悬停状态，但是当元素被聚焦或点击并滚动时，会显示悬停模拟。

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

即

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

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

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

唯一的负面因素是你没有得到“被攻击的状态”。我还没有调查解决方案，因为它对我的应用程序来说并不重要。

Answer 5

这是一篇旧文章，但是我今天在2019年为此而苦苦挣扎，我找到了这个干净的解决方案，并且想与大家分享。

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

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

基本上，我们在这里所做的是在具有指针机制的任何设备中使用悬停。如今，有一些带有html阅读器的软件可以更好地访问站点，并且不是一个好主意，请对所有移动设备停用：hover。只需清楚一点，任何没有指针机制的设备都将无法生效，否则我们将使用：hover样式。

Answer 6

你需要抓住以下事件

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应解决问题

Answer 7

如果您使用的是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分辨率的设备上按下按钮将不再有问题

Answer 8

这是一种解决方法：

var btn = jQuery(".nav-menu ul li:first");
var btn_new = btn.clone(true);
btn.remove();
jQuery(".nav-menu ul").append(btn_new);

移动safari链接保持触摸后的焦点

8 个答案: