logo标签列表

修复iPhone/iPad/iPod上的CSS hover效果

ioscsshovertouch
34
我希望将iOS上的悬停效果修复（更改为触摸事件），但我没有任何想法。 让我解释一下。 您的页面中有一个文本：
<div class="mm">hello world</div>

样式：

.mm { color:#000; padding:15px; }
.mm:hover { background:#ddd; }

在桌面端，当你将鼠标放在文本上时，会出现 #ddd 的背景色，对吧？但是在iOS上如果你触摸文本，什么也不会发生，但是如果你轻敲它，它会变得丑陋和粘性的 #ddd 背景色，这样不好看。我想让用户在触摸文本时能够得到悬停效果（类似于 touchevent）。但是我看到一些网站已经解决了这个问题，例如 freemyappps.com 或者（请在 iOS 设备上检查此网站 ->D4F，然后触摸某些内容以查看类似吃蛋糕的悬停效果 :)）。 这些网站是如何解决这个问题的呢？ 我应该如何像他们一样解决这个问题呢？ 谢谢

他们可能使用了JavaScript。 - Andrew
那怎么办？:( 你能否提供一个 JSFiddle 示例吗？ - user2627442
16个回答
118

将 onclick="" 添加到任何您希望iOS识别为具有悬停效果的元素中。

<div onclick="">Click Me!</div>
1
这对于我的一个案例有效，另一个还没有生效，我猜还有一些需要澄清的地方。 - bard
1
2019年10月，这仍然有效。我简直不敢相信这么简单的事情就解决了问题。有人能清楚地解释为什么它起作用吗？ - alpay
51

有些人可能不知道这个。你可以在 div:hover 上应用它并且在 iPhone 上也能生效。

将以下 CSS 添加到具有:hover效果的元素中。

.mm {
    cursor: pointer;
}
这似乎是最好的解决方案，而不是将 onClick 添加到元素中。 - Neekey
简单的解决方案，但有效！我觉得iOS在风格上有很多“如果它看起来可以悬停/可点击，就像那样处理它”。 - benzkji
1
这将是一个理想的解决方案，但它似乎在iOS 11上的iPad上无法工作。 - Meshaal
有趣的是，即使在<a>标签上也必须这样做。 - yairniz
1
这对你真的有用吗？我也遇到了同样的问题，但是在触摸后，悬停状态会卡在元素上。 - Rafe
27

当我尝试使用onclick=""时，它非常喜怒无常。

对于触摸事件，可以使用:active CSS；将以下代码放入页头：

<script>
    document.addEventListener("touchstart", function() {},false);
</script>
我发现当你在有缺陷的iOS 9.1上使用长按时，它会导致Safari崩溃...目前我们0.4%的用户仍在使用该版本。 - Ruskin
1
@Ruskin，仅仅一年后你的评论，我们的百分比已经更高了！): - brandito
16

我不确定这是否会对性能产生巨大影响，但在过去，这对我有所帮助：

var mobileHover = function () {
    $('*').on('touchstart', function () {
        $(this).trigger('hover');
    }).on('touchend', function () {
        $(this).trigger('hover');
    });
};

mobileHover();
在我看来，这里最整洁、最符合规范的解决方案。 - Boz
这对我非常有效。刚在iPhone上测试过。谢谢。 - KLL
13

给 body 添加一个 tabIndex 属性：

<body tabIndex=0 >

这是唯一一个在禁用JavaScript时也能正常工作的解决方案。

向html元素添加ontouchmove：

<html lang=en ontouchmove >

有关示例和备注，请参阅此博客文章：https://dev.webonomic.nl/fixing-the-iphone-css-hover-problem-on-ios。

在iOS 13上已确认。

这些解决方案的优点是当您单击其他地方时，悬停状态会消失。源中也不需要额外的代码。

ontouchmove 对我有效 - 我还需要 tabIndex 吗？ - Antonio Gallo
2
不，你可以自己选择。只有TabIndex在禁用Javascript时有效。 - Janghou
tabindex 属性是使本来无法响应的 HTML 元素具有 :focus 和 :hover 功能的标准方法。这应该是推荐的答案。 - Rounin
谢谢这个。所有上述的修复措施在我的iPad上都没有完全起作用。使用此版本还可以取消悬停项目..否则会出现非常奇怪的行为。该死的iOS！ - Andy
5

这是对用户1387483回答的小改进，使用立即执行函数：

(function() {
  $("*").on( 'touchstart', function() {
    $(this).trigger('hover') ;
  } ).on('touchend', function() {
    $(this).trigger('hover') ;
  } ) ;
})() ;

此外，我同意Boz的观点，这似乎是最整洁、最符合标准的解决方案。
5

这是我制作的一个基本的、成功的在iOS上使用JavaScript hover的例子：

注意：我使用了jQuery，希望这对您来说没问题。

JavaScript代码：

$(document).ready(function(){
  // Sorry about bad spacing. Also...this is jquery if you didn't notice allready.
  $(".mm").hover(function(){
    //On Hover - Works on ios
    $("p").hide();
  }, function(){
    //Hover Off - Hover off doesn't seem to work on iOS
    $("p").show();
 })
});

CSS：

.mm { color:#000; padding:15px; }

HTML:

<div class="mm">hello world</div>
<p>this will disappear on hover of hello world</p>
你能否使用你的解决方案编辑这个fiddle？http://jsfiddle.net/smmCW/1/ - 对不起我是新手... :"( - user2627442
这是完全相同的代码，就像在jsfiddle和上面的一样。如果您要使用此示例，请不要忘记使用以下代码导入jquery库：<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>或类似的内容。 - Andrew
我从未使用新的jsfiddle示例更新问题。 - Andrew
不好意思，我可能犯了一个错误 :( - user2627442
2
我觉得这不应该是被接受的答案，因为问题是关于CSS悬停的，而这个解决方案是纯JavaScript。 - WackGet
4
2

我知道这是一个旧帖子，已有回答，但我找到了另一种解决方案，无需添加CSS类或做太多不必要的JavaScript代码，而且我想分享它，希望可以帮助他人。

我发现为了在触摸设备上启用:hover效果，你需要告诉浏览器你的元素是可点击的。你可以简单地使用jQuery或JavaScript向click函数添加一个空处理程序。

$('.need-hover').on('click', function(){ });

如果您使用以下代码片段，最好只在移动设备浏览器上进行：

// check for css :hover supports and save in a variable
var supportsTouch = (typeof Touch == "object");

if(supportsTouch){ 
    // not supports :hover
    $('.need-hover').on('click', function(){ });
}
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接