平板电脑悬停替代

Posted 2023-05-08

【中文标题】平板电脑悬停替代

【英文标题】：Tablet Hover Substitution

【发布时间】：2013-04-22 07:20:55

【问题描述】：

我现在知道这是一个“老问题”，但我已经搜索过，但还没有找到对我有意义的解释。

注意：我知道的 html、css 和 wordpress 足以开发我的网站：(http://www.gregorygainsborough.com)，并且刚刚开始学习 javascript。

如果您访问我的网站，您会发现问题 - 将鼠标悬停在各种框上时会显示大部分内容。在平板电脑上，由于没有：悬停，我想让它这样做： 首先点击 -> 显示将应用于 :hover 的样式。 第二次点击 -> 像点击鼠标一样点击链接。

当 a) 另一个元素被点击，或 b) 十秒过去时，“关闭”:hover 样式也很有帮助。

感谢您提供的任何帮助。我知道其中一些内容将超出我目前的 js 知识，我正在寻找可以帮助我有针对性地学习并缩小差距的解释或参考。

【问题讨论】：

使用php检测是否使用了Tablet，如果使用，则在点击时用Javascript控制，检查是否是第一次点击。这样就可以了；）

听起来不错！两个问题：a）您能否提供该代码实际内容的参考，以及 b）是否仍会在膝上/桌面上保持当前的 :hover->style 和 click->link 功能完好无损？

我现在正在回答。

在我看来，使用悬停来隐藏任何设备上的信息都是糟糕的 UI。不要使用它。问题解决了。

马克-谢谢！书柜 - 是的可能。尤其是在接下来的几年中，随着平板电脑的使用量继续攀升。但与此同时，我仍然喜欢我的悬停，建议的功能既可以完成这项工作，又可以帮助我学习 js！

【参考方案1】：

我会在 PHP 中创建一个IF 语句来检查是否使用了 Tablet。 您可以为此使用this Library。然后我会在IF 语句中回显这个javascript：

var clicked = 0;
$('a.iftablet').on('click',function()
    var old_clicked = clicked;
    var number = $(this).attr('tablet_id'); // Get the tablet ID for this item
    var clicked = number;
    if (old_clicked != number) return false; // This might do the trick, so that on first click, it doesn't link.
);

注意：我使用 jQuery，所以你需要 jQuery 库。 注意 2：在框周围的链接中添加 class="iftablet"，并添加 tablet_id="X"（其中 X 是该框的唯一编号，因此当单击一个框时，其他框将消失）。

也许代码有一些错误，然后让我知道。祝你好运

【讨论】：

太棒了。我将对此进行一些试验，然后回复您。感谢您的教导！