向主体添加一个tabIndex属性：

Question

我想修复iOS上的悬停效果（更改为触摸事件），但我不知道。让我解释一下。您的页面中有文字：

<div class="mm">hello world</div>

风格：

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

好的，在dekstop中，如果你把鼠标放在文本上，你会得到一个#ddd背景，对吗？但是在iOS中，如果你触摸文本，你什么也得不到，但是如果你点击它就会得到一个丑陋且粘性的#ddd背景，这是不好的，我希望用户在触摸那个文本时得到悬停效果（像我认为的touchevent）。但我看到一些网站已经修复，如freemyappps.com或（请在您的ios设备上查看此网站 - ＆gt; D4F并触摸某些内容以查看悬停效果，例如吃蛋糕:)）但是这些网站如何修复呢？怎么能像他们一样修复？感谢

Answer 1

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

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

Answer 2

有些人不知道这件事。您可以将其应用于 div:hover 并使用iPhone。

将以下css添加到 :hover 效果

的元素中

.mm {
    cursor: pointer;
}

Answer 3

当我尝试使用它时，onclick =“”非常有气质。

使用：活跃的css用于点击事件;只需将其放入标题中：

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

Answer 4

我不确定这是否会对性能产生巨大影响，但这对我来说已经成功了：

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

mobileHover();

Answer 5

以下是我在ios上使用javascript进行基本的成功使用：

注意：我使用了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>

Answer 6

使用立即函数对user1387483的答案进行了非常小的改进：

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

此外，我同意Boz的看法，这似乎是“最新，最符合要求的解决方案”。

Answer 7

当应用于链接标记时，hover伪类仅在iOS上起作用。他们这样做是因为没有悬停在触摸设备上。它更像活动类。所以他们不能拥有一个，除非它出于可用性原因而在某处链接。将您的div更改为链接标记，您将没有任何问题。

Answer 8

对Dan（https://stackoverflow.com/a/20048559/4298604）的回应，我建议稍微修改一下。

＆＃13;

<div onclick="void(0)">Click Me!</div>

＆＃13;

添加＆＃34; void（0）＆＃34;有助于获得未定义的原始值，而不是＆＃34;＆＃34;。

Answer 9

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

我发现要在启用Touch的浏览器上对每种元素启用: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(){ });
}

Answer 10

为目标元素分配事件监听器似乎有效。（至少使用＆＃39;点击＆＃39;。）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?

Answer 11

我成功使用了

(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答案的变体。

Answer 12

向主体添加一个tabIndex属性：

<body tabIndex=0 >

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

将`ontouchmove`添加到html元素：

<html lang=en ontouchmove >

对于examples and remarks see this blogpost：

已在iOS 13上确认。

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

Answer 13

在某些网站上我需要使用css“cursor：help”。只有iOS它给了我很多烦恼。要解决此问题，请将页面上的所有内容更改为“cursor：pointer”。这对我有用。

jQuery的：

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

Answer 14

在哪里，我通过将可见性属性添加到CSS代码解决了这个问题，它适用于我的http://pyparsing.wikispaces.com/file/view/invRegex.py/111533811/invRegex.py

原始代码：

＆＃13;

#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;
}

＆＃13;

修正了iOS触控代码：

＆＃13;

#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;
}

＆＃13;

Answer 15

我知道，但是我在使用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);
     }
     );

Answer 16

我知道这个问题很老，但是仍然很重要。

我发现唯一可行的解决方案是使用@media查询，如下所示：

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

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

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

16 个答案:

向主体添加一个tabIndex属性：

将`ontouchmove`添加到html元素：

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

16 个答案:

向主体添加一个tabIndex属性：

将ontouchmove添加到html元素：

将`ontouchmove`添加到html元素：