Can'；无法在Android中使用：活动或：悬停效果

在Android默认浏览器中，我根本无法让

：active

或

：hover

工作。我知道

：hover

和

：active

不建议在手机上使用，但考虑到除了默认的Android浏览器之外，它们在任何地方都能正常工作，我想我还是试试。这段代码在iOS和Windows Phone上运行良好，但在Android上不行，我不知道为什么

CSS:

HTML:

点击这里！
这就出现了！

---

JS Fiddle:

我想出来了。出于某种原因，只有当用户旋转手机时，Android才会触发

：hover

事件。我不知道为什么会这样，但确实如此

所以，我就是这样修复的：

if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
    $(document).ready(function() {
        $("nav").children("a").click(function(e) {
            e.preventDefault();
            $(this).next("ul").css("transform","rotate(90deg)");
            $(this).next("ul").css("transform","rotate(0deg)");
        });
    });
};

基本上，我旋转我想出现在悬停上的东西，然后立即将其旋转回来。它使

：悬停

按预期工作。这对我来说毫无意义，但确实有效

---

如果有人对实现这一点有任何疑问，请告诉我。

在移动平台上通常单击或滑动鼠标时，悬停状态有什么意义？在不使用JavaScript的情况下拉菜单。我是纯CSS解决方案的粉丝，我已经在这个菜单上工作了很长时间。这是如此接近完美，这是非常令人沮丧。

<section id="clickBox" aria-haspopup="true">
    Click here!
</section>
<section id="hiddenBox">
    This appears!
</section>

if (navigator.userAgent.toLowerCase().indexOf("android") > -1) {
    $(document).ready(function() {
        $("nav").children("a").click(function(e) {
            e.preventDefault();
            $(this).next("ul").css("transform","rotate(90deg)");
            $(this).next("ul").css("transform","rotate(0deg)");
        });
    });
};