【问题标题】：Fix CSS hover on iPhone/iPad/iPod修复 iPhone/iPad/iPod 上的 CSS 悬停
【发布时间】：2013-08-05 12:31:48
【问题描述】：

我想修复 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
那么怎么样？ :(你能做一个jsfiddle示例吗？

标签： ios css hover touch

【解决方案1】：

在正文中添加 tabIndex 属性：

<body tabIndex=0 >

这是唯一在禁用 Javascript 时也有效的解决方案。

在 html 元素中添加`ontouchmove`：

<html lang=en ontouchmove >

对于examples and remarks see this blogpost：

在 iOS 13 上确认。

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

【讨论】：

ontouchmove 为我工作 - 我也需要 tabIndex 吗？
不，你可以选择。 TabIndex 是唯一在禁用 Javacript 时有效的索引。
江侯，绝妙的解决方案！

【解决方案2】：

我知道这个问题很老但仍然相关。

我发现唯一可行的解决方案是使用这样的@media 查询：

@media (hover) { my-class:hover {
  //properties
 }
}

我的参考：https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/

【讨论】：

【解决方案3】：

旧帖子我知道但是我在使用 JSON 数据填充表时成功使用了 onlclick=""。之前尝试了许多其他选项/脚本等，但没有任何效果。将在其他地方尝试这种方法。感谢@Dan Morris .. 从 2013 年开始！

     function append_json(data) {
     var table=document.getElementById('gable');
     data.forEach(function(object) {
         var tr=document.createElement('tr');
         tr.innerHTML='<td onclick="">' + object.COUNTRY + '</td>' + '<td onclick="">' + object.PoD + '</td>' + '<td onclick="">' + object.BALANCE + '</td>' + '<td onclick="">' + object.DATE + '</td>';
         table.appendChild(tr);
     }
     );

【讨论】：

【解决方案4】：

我成功使用了

(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document);

记录在 http://fofwebdesign.co.uk/template/_testing/ios-sticky-hover-fix.htm

因此是 Andrew M 答案的变体。

【讨论】：

【解决方案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>

【讨论】：

你能用你的解决方案编辑这个小提琴吗？ jsfiddle.net/smmCW/1 - 很抱歉成为新手... :"(
它与 jsfiddle 及以上代码完全相同。如果您要使用该示例，请不要忘记将 jquery 导入：<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script> 或类似的东西
而且我从未用新的 jsfiddle 示例更新问题。
否 :( 我可能有错误？ :(
我觉得这不应该是公认的答案，因为问题是关于 CSS 悬停，而这个解决方案是纯 JavaScript。

【解决方案6】：

我知道这是一个旧帖子，已经回答，但我找到了另一个解决方案没有添加 css 类或做太多的 javascript，而不是真正需要，我想分享它，希望可以帮助某人。

我发现要在支持触控的浏览器上对每种元素启用:hover 效果，您需要告诉他您的元素是可点击。为此，您只需使用 jQuery 或 javascript 向 click 函数添加一个空处理程序。

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

如果您只在具有此 sn-p 的支持移动的浏览器上这样做会更好：

// 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(){ });
}

【讨论】：

【解决方案7】：

以下是使用即时函数对 user1387483 的回答进行了非常轻微的改进：

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

另外，我同意 Boz 的观点，这似乎是“最简洁、最合规的解决方案”。

【讨论】：

我喜欢你的简单易读

【解决方案8】：

有些人不知道这一点。您可以将它应用到 div:hover 并在 iPhone 上工作。

将以下css添加到具有:hover效果的元素

.mm {
    cursor: pointer;
}

【讨论】：

这救了我的命 :)
这似乎是最好的解决方案，而不是在元素中添加onClick
微不足道的解决方案，但有效！ meseems iOS 有很多“如果它看起来是可悬停/可点击的，就这样对待它”的风格。
这将是一个理想的解决方案，只是它似乎不适用于 iOS 11 上的 iPad。
有趣的是，即使在标签上你也必须这样做

【解决方案9】：

我通过在 CSS 代码中添加可见性属性解决了这个问题，它适用于我的 website

原码：

#zo2-body-wrap .introText .images:before
{
background:rgba(136,136,136,0.7);
width:100%;
height:100%;
content:"";
position:absolute;
top:0;
opacity:0;
transition:all 0.2s ease-in-out 0s;
}

修复 iOS 触摸代码：

#zo2-body-wrap .introText .images:before
{
background:rgba(136,136,136,0.7);
width:100%;
height:100%;
content:"";
position:absolute;
top:0;
visibility:hidden;
opacity:0;
transition:all 0.2s ease-in-out 0s;
}

【讨论】：

【解决方案10】：

在某些网站上，我需要使用 css "cursor:help"。只有iOS它给了我很多刺激。要解决此问题，请将页面中的所有内容更改为“光标：指针”。这对我有用。

jQuery:

if (/iP(hone|od|ad)/.test(navigator.platform)) {
$("*").css({"cursor":"pointer"});
}

【讨论】：

【解决方案11】：

作为对 Dan (https://stackoverflow.com/a/20048559/4298604) 的回应，我会推荐一个稍作改动的版本。

&lt;div onclick="void(0)"&gt;Click Me!&lt;/div&gt;

添加“void(0)”有助于获得未定义的原始值，而不是“”。

【讨论】：

【解决方案12】：

为目标元素分配一个事件监听器似乎可行。（至少适用于“点击”。）CSS hover on ios works only if an event listener is assigned
将目标元素包装在 a[href=trivial] 中似乎也有效。 https://stackoverflow.com/a/28792519/1378390

移动版 Safari 处理点击和其他事件的算法的相关说明/图表在这里：Is it possible to force ignore the :hover pseudoclass for iPhone/iPad users?

【讨论】：

【解决方案13】：

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

使用 :active css 进行点击事件；只需将其放入您的标题中：

<script>
    document.addEventListener("touchstart", function() {},false);
</script>

【讨论】：

实际上，其他解决方案都不适合我。谢谢，安德鲁 M！
我发现当您在有故障的 iOS 9.1 上使用长按时，Safari 会崩溃……我们 0.4% 的用户仍在使用该系统
@Ruskin 'only'，我们的百分比更高，这是您发表评论后的一年！ ):

【解决方案14】：

将 onclick="" 添加到您希望 iOS 识别为带有悬停元素的任何内容。

<div onclick="">Click Me!</div>

【讨论】：

谢谢。这既简单又有效。
太美了！没有在其他地方找到这种方法，它是 1 行，不需要 js，太棒了！
这适用于我的一种情况，另一种仍然无效，我想还有一些事情需要澄清。
很好的解决方案！
2019 年 10 月，这仍然有效。我不敢相信这么简单的事情就能解决问题。有没有人清楚解释它为什么有效？

【解决方案15】：

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

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

mobileHover();

【讨论】：

这里是最整洁、最合规的解决方案。
这对我很有用。刚刚在 iPhone 上测试过。谢谢。

【解决方案16】：

hover 伪类仅在应用于链接标签时在 iOS 上起作用。他们这样做是因为真正的触摸设备上没有悬停。它的行为更像是活动类。因此，除非出于可用性原因将链接指向某个地方，否则他们不能拥有一个。将您的 div 更改为链接标签，您将没有问题。

【讨论】：

在正文中添加 tabIndex 属性：

在 html 元素中添加ontouchmove：

在 html 元素中添加`ontouchmove`：