use*_*442 30 css hover touch ios
我想修复iOS上的悬停效果(更改为触摸事件),但我不知道.让我解释一下.您的页面中有文字:
<div class="mm">hello world</div>
风格:
.mm { color:#000; padding:15px; }
.mm:hover { background:#ddd; }
好吧,在dekstop中,如果你把鼠标放在文本上,你会得到一个#ddd背景,对吗？但是在iOS中,如果你触摸文本,你什么也得不到,但是如果你点击它就会得到一个丑陋且粘性的#ddd背景,这是不好的,我希望用户在触摸那个文本时得到悬停效果(像我认为的touchevent) .但是我看到一些网站已经修好了,比如freemyappps.com或者(请在你的ios设备上查看这个网站 - > D4F并触摸一些东西,看看像吃蛋糕一样的悬停效果:))但是这些网站如何解决这个问题呢？怎么能像他们一样修复？谢谢
小智 102
将onclick =""添加到您希望iOS识别为悬停元素的任何内容.
<div onclick="">Click Me!</div>
ral*_*zar 47
有些人不知道这一点.您可以将其应用于div:hoveriPhone并在iPhone 上工作.
将以下css添加到具有:hover效果的元素中
.mm {
cursor: pointer;
}
And*_*w M 23
当我尝试使用它时,onclick =""非常有气质.
使用:活动css用于点击事件; 只需将其放入标题:
<script>
document.addEventListener("touchstart", function() {},false);
</script>
小智 16
我不确定这是否会对性能产生巨大影响,但这在过去对我有所帮助:
var mobileHover = function () {
$('*').on('touchstart', function () {
$(this).trigger('hover');
}).on('touchend', function () {
$(this).trigger('hover');
});
};
mobileHover();
这是我在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>
<body tabIndex=0 >
这是唯一在禁用 Javascript 时也有效的解决方案。
ontouchmove到 html 元素：<html lang=en ontouchmove >
在 iOS 13 上确认。
这些解决方案的优点是，当您单击其他位置时，悬停状态会消失。源代码中也不需要额外的代码。
这是使用即时函数对user1387483的回答的非常微小的改进：
(function() {
$("*").on( 'touchstart', function() {
$(this).trigger('hover') ;
} ).on('touchend', function() {
$(this).trigger('hover') ;
} ) ;
})() ;
另外，我也同意Boz的观点，这似乎是“最新，最合规的解决方案”。