修复 iPhone/iPad/iPod 上的 CSS 悬停

Posted

技术标签:

【中文标题】修复 iPhone/iPad/iPod 上的 CSS 悬停【英文标题】：Fix CSS hover on iPhone/iPad/iPod 【发布时间】：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示例吗？ 【参考方案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 导入：&lt;script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'&gt;&lt;/script&gt; 或类似的东西 而且我从未用新的 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://***.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://***.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 更改为链接标签，您将没有问题。

【讨论】：

以上是关于修复 iPhone/iPad/iPod 上的 CSS 悬停的主要内容，如果未能解决你的问题，请参考以下文章

你能确定插入 iphone/ipad/ipod 耳机插孔的具体设备类型吗？

使用Tenorshare iCareFone for mac为iPhone做系统修复

iphone ipad ipod检测

在 iPad/iPhone 上的 CSS 提交按钮奇怪的渲染

检测 iPhone/iPad/iPod touch 的颜色？

检测 iPhone/iPad/iPod touch 的颜色？