修复 iPhone/iPad/iPod 上的 CSS 悬停
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18047353/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fix CSS hover on iPhone/iPad/iPod
提问by user2627442
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 :
我想修复 iOS 上的悬停效果（更改为触摸事件），但我不知道。让我解释一下。您的页面中有一段文字：
<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 ->D4Fon 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
好的，在 dekstop 中，如果您将鼠标放在文本上，您将获得 #ddd 背景，对吗？但是在 iOS 中，如果你触摸文本，你什么也得不到，但如果你点击它，它会得到一个丑陋和粘性的 #ddd 背景，这并不好，我希望用户在触摸该文本时获得悬停效果（我认为类似于 touchevent ） . 但是我看到一些网站已修复，例如 freemyappps.com 或（请在您的 ios 设备上查看此网站 -> D4F并触摸某些内容以查看悬停效果，例如吃蛋糕:)）但是这些网站是如何修复的？怎么能像他们一样修好？谢谢
采纳答案by Santa Claus
Here is a basic, successful use of javascript hover on ios that I made:
这是我在 ios 上成功使用 javascript 悬停的基本方法：
Note: I used jQuery, which is hopefully ok for you.
注意：我使用了 jQuery，希望它适合你。
JavaScript:
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:
CSS：
.mm { color:#000; padding:15px; }
HTML:
HTML：
<div class="mm">hello world</div>
<p>this will disappear on hover of hello world</p>
回答by Dan Morris
Add onclick="" to anything you wish iOS to recognise as an element with a hover.
将 onclick="" 添加到您希望 iOS 识别为带有悬停的元素的任何内容。
<div onclick="">Click Me!</div>
回答by ralcazar
Some people don't know about this. You can apply it on div:hoverand working on iPhone .
有些人不知道这件事。您可以div:hover在 iPhone上应用它并在 iPhone上工作。
Add the following css to the element with :hovereffect
将以下css添加到有:hover效果的元素
.mm {
cursor: pointer;
}
回答by Andrew M
The onclick="" was very temperamental when I attempted using it.
当我尝试使用 onclick="" 时，它非常喜怒无常。
Using :active css for tap events; just place this into your header:
将 :active css 用于点击事件；只需将其放入您的标题中：
<script>
document.addEventListener("touchstart", function() {},false);
</script>
回答by user1387483
I"m not sure if this will have a huge impact on performance but this has done the trick for me in the past:
我不确定这是否会对性能产生巨大影响，但这在过去对我有用：
var mobileHover = function () {
$('*').on('touchstart', function () {
$(this).trigger('hover');
}).on('touchend', function () {
$(this).trigger('hover');
});
};
mobileHover();
回答by Jesse Heines
Here is a very slight improvement to user1387483's answer using an immediate function:
这是使用立即函数对 user1387483 的回答的一个非常小的改进：
(function() {
$("*").on( 'touchstart', function() {
$(this).trigger('hover') ;
} ).on('touchend', function() {
$(this).trigger('hover') ;
} ) ;
})() ;
Also, I agree with Boz that this appears to be the "neatest, most compliant solution".
此外，我同意 Boz 的观点，这似乎是“最简洁、最合规的解决方案”。
回答by Janghou
Add a tabIndex attribute to the body:
向正文添加 tabIndex 属性：
<body tabIndex=0 >
This is the only solution that also works when Javascript is disabled.
这是唯一在禁用 Javascript 时也有效的解决方案。
Add ontouchmoveto the html element:
添加ontouchmove到 html 元素：
<html lang=en ontouchmove >
For examples and remarks see this blogpost:
Confirmed on iOS 13.
在 iOS 13 上确认。
These solutions have the advantage that the hovered state disappears when you click somewhere else. Also no extra code needed in the source.
这些解决方案的优点是，当您单击其他位置时，悬停状态会消失。源代码中也不需要额外的代码。
回答by Steven Ventimiglia
In response to Dan (https://stackoverflow.com/a/20048559/4298604), I would recommend a slightly altered version.
为了回应 Dan ( https://stackoverflow.com/a/20048559/4298604)，我会推荐一个稍微改动的版本。
<div onclick="void(0)">Click Me!</div>Adding "void(0)" helps to obtain the undefined primitive value, as opposed to "".
添加“void(0)”有助于获得未定义的原始值，而不是“”。
回答by E. Atzeni
I know it's an old post, already answered, but I found another solution without adding css classesor doing too much javascript than really needed, and I want to share it, hoping can help someone.
I found that to enable :hovereffect on every kind of elements on a Touch enabled browser, you need to tell him that your elements are clickable.
To do so you can simply add an empty handler to the click function with jQuery or javascript.
我知道这是一个旧帖子，已经回答了，但我找到了另一个解决方案， 无需添加 css 类，也不需要做太多真正需要的 javascript，我想分享它，希望可以帮助别人。
我发现要在启用:hoverTouch 的浏览器上对各种元素启用效果，您需要告诉他您的元素是可点击的。为此，您可以简单地使用 jQuery 或 javascript 向单击函数添加一个空处理程序。
$('.need-hover').on('click', function(){ });
It's better if you do so only on Mobile enabled browsers with this snippet:
如果您只在支持移动的浏览器上使用以下代码段执行此操作会更好：
// 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(){ });
}
回答by Sylvain D.
I successfully used
我成功使用
(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document);
which was documented on http://fofwebdesign.co.uk/template/_testing/ios-sticky-hover-fix.htm
记录在 http://fofwebdesign.co.uk/template/_testing/ios-sticky-hover-fix.htm
so a variation of Andrew M answer.
所以安德鲁M答案的变体。
