iPad 上的 CSS 问题

Question

我在 iPad 上有一个非常简单的 CSS 相关问题。 我有一组子链接，每个子链接在 CSS 中定义为：

#leftNav .searchBySub {...}
#leftNav a.searchBySub:hover {...}
#leftNav .searchBySubClicked {...}

我有一个 JS ，我已经在其中定义了

$("#leftNav  a.searchBySub").live("touchstart",function(){...}
$("#leftNav  a.searchBySub").live("click",function(){...}

现在我的问题是，当我单击 iPad 上的任何子链接时，为什么它会对其应用 :hover 状态 CSS？我也可以以某种方式改变这种行为吗？

在提出任何简单/基本建议之前，请仔细阅读问题，因为我已经尝试过基本修复。

此外，在您说之前，iPad 上没有悬停事件，我知道这一点，但就我而言，它确实如此单击链接时应用 :hover 状态类。

我知道您可能会说只需从 CSS 中删除 :hover 定义，但不幸的是我不能这样做，因为桌面浏览器也使用相同的 CSS（甚至对于媒体查询，它没有帮助）

所以我的主要问题是单击链接时如何覆盖：悬停状态？

更新...

下面是我尝试过的代码；

    $("#leftNav  a.searchBySub").live("touchstart",function(){
                var a=document.getElementsByClassName("searchBySub");                 
                for(var i=0;i<a.length;i++)                 
                {                         
                a[i].ontouchstart=function(e){
 window.location=this.getAttribute("href");
                console.log("ontouchstart2");
                e.stopPropagation();                                 
                e.preventDefault(); 
                return false;}                 
                }
                $("#leftNav  a.searchBySub").removeClass("searchBySubClick");
                $(this).addClass("searchBySubClick");
                clickEvent($(this));
            });

Answer 1

Safari 手机按特定顺序处理该事件：当您按下然后释放屏幕时，会发生以下情况：

ontouchstart - onmouseover/:hover - mousedown - mouseup - click/:active

请注意，onmouseout（:hover 状态结束）不会除非您单击其他地方，否则会调用。我花了一段时间才弄清楚这一点。

作为解决方法，您可以使用此类代码在 onmouseover 事件发生之前触发您的链接。

        function ipadLinksHack()//Call it onload
        {
                var a=document.getElementsByTagName("a");
                for(var i=0;i<a.length;i++)
                {
                        //Note to self: ontouchstart and not onclick! :)
                        a[i].ontouchstart=function(e)
                        {
                                window.location=this.getAttribute("href");
                                e.stopPropagation();
                                e.preventDefault();
                                return false;//Prevents the link default behavior
                        }
                }
        }

备注：当您处于“独立模式”（又名网络应用程序）并点击链接时，您还可以使用此代码段来防止打开 Safari。这是这个函数的主要目的。
另外，请阅读事件处理指南 官方文档可能会有所帮助。

Answer 2

当用户通过单击某个元素来聚焦该元素时，将应用 :hover 样式，并触发 mouseover、mousemove、mousedown、mouseup 和 click 事件（始终；并按该顺序）。

所以 :hover 即使在 iOS 上也适用。不确定 iOS 是否支持 :focus （或者可能是 :active），但您可以使用它来“撤消”由 :hover 所做的更改。

或者使用JS调用.blur()（未经测试）。

Answer 3

查看 document.styleSheets[0].deleteRule() 函数，然后简单地删除相对于链接包含“:hover”的每个规则。
这是一些文档和一些用法示例。

请小心，因为伪元素脚本在大多数浏览器上似乎不可靠，因此只需循环样式表并删除“a:hover”规则即可。