在iPhone / iPad / iPod上固定CSS悬停 [英] Fix CSS hover on iPhone/iPad/iPod

问题描述

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

 < div class =mm> hello world< div> 
  

使用样式：

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

好的，在dekstop，如果你把鼠标放在文本你得到一个#ddd的背景，右？
但是在iOS中，如果你触摸文本，你得到什么，但如果你点击它得到一个丑陋和粘的#ddd背景，这不是很好，我想让用户获得悬停效果，当他触摸该文本（类似touchevent我想）。
但我看到一些网站固定，像freemyappps.com或
（请检查此网站 - > D4F 在您的ios设备和触摸东西看到悬停效果像吃蛋糕:)）
但是这些网站如何修复呢？
如何修复像他们？
感谢

解决方案

这里是一个基本的，成功的使用javascript hover on ios。 http://jsfiddle.net/pizzaboy13/u7FL5/

所有的代码从jsfiddle下面，因为你apperantly不能有没有代码的链接jsfiddle.net。

注意：我使用jquery，

  $（文档）.ready（function（）{
 //对不起的间距，如果你没有注意到，这是jquery 
 $（。mm）。hover （）{
 // On Hover  -  on ios 
 $（p）。hide（）; 
}，function（）{
 // Hover Off  -  Hover off在iOS上似乎不起作用
 $（p）。show（）; 
}）
}）; 
  

CSS：

 code> .mm {color：＃000; padding：15px; } 
  

HTML：

 < div class =mm> hello world< / div> 
< p>这将在hello world悬停时消失< / p> 
  

I want to fix the hover effect on iOS ( change to touch event ) but I dont have any idea . Let me explain this . You have a text in your page :

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

With style :

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

Ok , in dekstop if you put your mouse over the text you get a #ddd background , right ? But in iOS if you touch the text you get nothing but if you tap it it gets a ugly and sticky #ddd background which is not nice and I want the user get the hover effect when he touch that text ( something like touchevent I think ) . But I see some websites fixed that like freemyappps.com or ( please check this site ->D4F on your ios device and touch something to see the hover effect like eating a cake :) ) But how these sites fixed that ? How can fix like them ? Thanks

解决方案

Here is a basic, successful use of javascript hover on ios that I made. http://jsfiddle.net/pizzaboy13/u7FL5/

All the code from the jsfiddle is below since you apperantly can't have a link to jsfiddle.net without code.

Note: I used jquery, which is hopefully ok for you.

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>

这篇关于在iPhone / iPad / iPod上固定CSS悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！