Javascript iPad上的CSS问题

我在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 state CSS？我还能以某种方式改变这种行为吗

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

在你说之前，我知道iPad上没有悬停事件，但在我的例子中，当点击链接时，它确实应用了：hover state类

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

所以我的主要问题是，当点击链接时，如何覆盖：hover状态

更新

下面是我尝试过的代码

    $("#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));
            });

$（“#leftNav a.searchBySub”）.live（“touchstart”，函数（）{
var a=document.getElementsByClassName（“searchBySub”）；
对于（var i=0；iSafari mobiles按特定顺序处理事件：当您按下然后释放屏幕时，会发生以下情况：

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
                        }
                }
        }

函数ipadLinksHack（）//调用它onload
{
var a=document.getElementsByTagName（“a”）；
对于（var i=0；官方文档上的i可能会有所帮助。
Safari mobiles按特定顺序处理事件：当您按下然后释放屏幕时，会发生以下情况：

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
                        }
                }
        }

函数ipadLinksHack（）//调用它onload
{
var a=document.getElementsByTagName（“a”）；
对于（var i=0；官方文档上的i可能会有所帮助）

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

所以：hover甚至应用于iOS。不确定iOS是否支持：focus（或者：active），但您可以使用该选项“撤消”由：hover所做的更改

或者使用JS调用.blur（）（未测试）

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

所以：hover甚至应用于iOS。不确定iOS是否支持：focus（或者：active），但您可以使用该选项“撤消”由：hover所做的更改

或者使用JS调用.blur（）（未测试）。
查看一下
文档.styleSheets[0].deleteRule（）
函数，只需删除相对于链接包含“：hover”的所有规则。
这是和

请小心，因为伪元素脚本在大多数浏览器上似乎不可靠，所以只需在样式表中循环并删除“a:hover”规则。
请查看
文档。样式表[0]。deleteRule（）
函数，只需删除相对于链接包含“：hover”的所有规则。
这是和

请小心，因为伪元素脚本在大多数浏览器上似乎不可靠，所以只需在样式表中循环并删除“a:hover”规则。
你确定是悬停状态吗？既然你说iPad上不存在悬停状态，那么如何应用它？也许为了兼容性，mobile safari可能会将：hover视为：active或：focus。尝试为：active或：focus链接指定规则，看看这是否会改变什么。Are你确定这是悬停状态吗？既然你说iPad上没有悬停状态，那么如何应用它呢？也许为了兼容性，mobile safari可能会将：hover视为：active或：focus。尝试为：active或：focus链接指定规则，看看这是否会改变什么。Thx很多…你知道吗似乎已经很好地理解了这个问题……当我尝试你在我的应用程序中给出的代码时，它仍然在iPad上应用：hover CSS……所以仍然在寻找覆盖它的方法……对不起，我犯了一个错误，在上面的代码中，我在
onclick（）上添加了我的hack
事件，发生在
：hover
之后。应该将其置于
ontouchstart
事件。我的错。（我编辑了上面的代码，可以再试一次）.好的…没有问题..我会尝试相同的方法…因此基本上，上面的代码会在iPad上单击链接时取消/阻止链接进入悬停状态…正确吗？它会在
：hover
状态之前触发重定向，并尝试阻止其他事件触发
返回false；
。所以基本上，是的。好的..Thx很多关于细节…我会花一些时间在iPad上测试这个东西…但肯定明天…我会尽快在这里发布我的发现…请保持这一点在你的雷达上保持不变…再次感谢你提供的所有精彩提示/解决方案…非常感谢…你似乎已经很好地理解了这个问题我尝试了你在我的应用程序中提供的代码，它仍然在iPad上应用：hover CSS…因此仍然在寻找覆盖它的方法…抱歉，我犯了一个错误，在上面的代码中，我在
onclick（）
事件中添加了我的hack，它发生在
：hover
事件之后。应该将它放到
ontouchstart
事件中。我的错了。（我编辑了上面的代码