33

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

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

搭配风格：

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

好的，在桌面中，如果您将鼠标放在文本上，您会得到#ddd 背景，对吗？但是在iOS中，如果你触摸文本，你什么也得不到，但是如果你点击它，它会得到一个丑陋而粘稠的#ddd背景，这不是很好，我希望用户在触摸该文本时获得悬停效果（我认为类似于 touchevent） . 但是我看到一些网站已修复，例如 freemyappps.com 或（请在您的 ios 设备上查看此网站 -> D4F并触摸某些东西以查看悬停效果，例如吃蛋糕:)）但是这些网站是如何修复的呢？怎么能像他们一样修好？谢谢

4

16 回答 16

117

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

<div onclick="">Click Me!</div>
于 2013-11-18T13:05:46.043 回答
50

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

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

.mm {
    cursor: pointer;
}
于 2014-07-03T06:37:26.490 回答
27

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

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

<script>
    document.addEventListener("touchstart", function() {},false);
</script>
于 2015-02-27T17:58:56.437 回答
16

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

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

mobileHover();
于 2013-11-11T18:52:08.617 回答
8

在正文中添加一个 tabIndex 属性：

<body tabIndex=0 >

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

添加ontouchmove到 html 元素：

<html lang=en ontouchmove >

有关示例和备注，请参阅此博文：

在 iOS 13 上确认。

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

于 2019-11-08T13:40:58.840 回答
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>
于 2013-08-05T13:44:14.767 回答
5

这是使用立即函数对 user1387483 的答案的一个非常小的改进：

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

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

于 2017-06-19T23:14:50.817 回答
4

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

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

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

于 2016-06-23T19:24:46.133 回答
2

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

于 2013-08-05T02:31:58.180 回答
2

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

我发现要在启用:hoverTouch 的浏览器上启用各种元素的效果，你需要告诉他你的元素是可点击的。为此，您只需使用 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(){ });
}
于 2016-07-24T17:14:42.543 回答
2

我成功使用

(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

所以安德鲁 M 答案的变体。

于 2018-07-23T15:46:35.747 回答
1

  1. 将事件侦听器分配给目标元素似乎可行。（至少适用于“点击”。）iOS 上的 CSS 悬停仅在分配了事件侦听器时才有效

  2. 将目标元素包装在 a[href=trivial] 中似乎也有效。https://stackoverflow.com/a/28792519/1378390

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

于 2015-03-01T10:36:20.473 回答
0

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

jQuery：

if (/iP(hone|od|ad)/.test(navigator.platform)) {
$("*").css({"cursor":"pointer"});
}
于 2016-10-03T07:31:31.797 回答
0

在哪里，我通过向 CSS 代码添加可见性属性解决了这个问题，它适用于我的网站

原始代码：

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

于 2016-10-05T00:28:28.233 回答
0

旧帖子我知道但是我在使用 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);
     }
     );
于 2018-10-26T04:19:56.227 回答
0

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

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

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

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

于 2019-02-15T13:25:02.070 回答