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

小编典典

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

css

我想修复iOS上的悬停效果（更改为touch事件），但我没有任何想法。让我解释一下。您的页面中有文字：

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

搭配风格：

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

好吧，在dekstop中，如果将鼠标放在文本上，则会得到#ddd背景，对吗？但是在iOS中，如果您触摸文本，您什么也不会得到，但是如果您点击它，它将得到一个丑陋且粘滞的#ddd背景，这不是很好，我希望用户在触摸文本时获得悬停效果（我认为是诸如touchevent之类的东西）。但是我看到一些网站已修复，例如freemyappps.com或（请在ios设备上检查此网站->
D4F，并触摸某些东西以查看诸如吃蛋糕的悬停效果：））但是，这些网站如何解决该问题？怎样才能像他们一样解决？谢谢

阅读 363

2020-05-16

共1个答案

小编典典

这是我在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>

2020-05-16