gpt4 book ai didi

javascript - 防止 :hover on touch in iOS

转载 作者:行者123 更新时间:2023-11-28 07:01:13 25 4
gpt4 key购买 nike

我有一个菜单,当它悬停在上面时需要弹出(当光标移到外面时折叠)。但是,在触摸设备上,我希望它在“点击”时展开和折叠,因为悬停事件不是很有用。

为此,我使用了 :hover 选择器和一个应用于触摸事件的备用 .clicked 类。 touchstart 处理程序切换 .clicked 类并使用 preventDefault 阻止默认操作(设置 :hover 标志)。

它在 Chrome 的移动模拟器中运行良好,但在我的 iPhone 上,菜单最终同时具有 :hover 和 .clicked。为什么会这样?

这是一个 fiddle :http://jsfiddle.net/rgLodhjg/1/

// html
<div class="test">
</div>

// css
.test {
width: 200px;
height: 100px;
border: 1px solid black;
}
.test:hover:before {
content: "hover";
}
.test.clicked:after {
content: "clicked";
}

// js
$(".test").on("touchstart", function(e) {
$(this).toggleClass("clicked");
e.preventDefault();
return false;
});

最佳答案

你可以试试这个,它会在 iOS9 上工作(我不确定 iOS8 和更早的版本):

@media (hover: hover) {
.test:hover:before {
content: "hover";
}
}

要支持旧的 iOS 系统,您可以使用 mq4-hover-shim .

您也可以使用@Simon_Weaver 在this post 中提供的解决方案.

关于javascript - 防止 :hover on touch in iOS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33221291/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com