iOS自动悬停修复？

Question

iOS自动悬停修复？

DAD*_*ADU 16 javascript css iphone hover

是否有jQuery插件或JavaScript脚本自动循环每个CSS悬停(在外部样式表中找到)并将其与双触地事件绑定？

触地1 - CSS:触发悬停
触地2 - 点击(链接跟随或表单行动)

如果还没有这样的东西,它可以制作和如何(指导方针)？

编辑:

要清楚,我不是在寻找双击.触地1是一个单独的标签,就像Touchdown 2一样.在两者之间或多达3分钟之间可以有少至0秒,这是用户的选择.

不要触碰:

:悬停 - >元素变得可见
单击 - >以下链接或其他操作

触摸(iOS):

触地1 - >元素变得可见
触地2 - >以下链接或其他动作

Answer 1

Ric*_*uen 13

试试这个:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>iPad Experiment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            if(navigator.platform == "iPad") {
                $("a").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
                    var onClick; // this will be a function
                    var firstClick = function() {
                        onClick = secondClick;
                        return false;
                    };
                    var secondClick = function() {
                        onClick = firstClick;
                        return true;
                    };
                    onClick = firstClick;
                    $(this).click(function() {
                        return onClick();
                    });
                });
            }
        });
    </script>
    <style type="text/css">
        a:hover {
            color:white;
            background:#FF00FF;
        }
    </style>
<body>
    <a href="http://google.ca">Google</a>
    <a href="http://stackoverflow.com">stackoverflow.com</a>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

...或者在我的网站上查看演示.请注意,它的设置只能在iPad上发挥其魔力 - 检测iOS的所有版本是我书中的另一个问题;)

它的工作原理是......

单击iphone或ipad上的链接后,它会留下模拟鼠标悬停,触发该链接上的a:hover css样式.如果链接具有使您保持在同一页面的javascript处理程序,则在您单击其他链接之前,悬停状态不会更改.

引用:Safari iphone/ipad"鼠标悬停"在新链接之后用javascript取代之前的链接

Answer 2

Ric*_*haw 6

我用过这个:

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

Run Code Online (Sandbox Code Playgroud)

之前,允许悬停在某些元素上.显然你需要调整它以供自己使用,但这是一种允许触摸并保持悬停效果的好方法.

在我使用的网站中,这就是我所做的,因为我不希望每个悬停都以这种方式行事.你可以将事件添加到每个元素,但这看起来很浪费,并且会过多地阻止默认.最后我决定这个,因为它似乎是一个愉快的妥协. (2认同)

归档时间：	14 年，7 月前
查看次数：	36048 次
最近记录：	11 年前