jQuery悬停功能超时答案

【问题标题】：time-out on jQuery hover functionjQuery悬停功能超时
【发布时间】：2012-11-05 10:57:33
【问题描述】：

我目前正在使用下面的代码，使用 jQuery 和悬停功能在用户将鼠标悬停在图像上时淡入“标题”元素。这在桌面浏览器上非常有效，但是在使用 iPad 等移动触摸设备进行测试时，需要用户点击图像以触发悬停功能，标题会按预期淡入，但在用户选择页面上的另一个对象之前保持活动状态。

我想知道一种简单的方法来修改我的 javascript 代码以检测移动触摸设备，然后在标题中添加某种类型或计时器，使其在一段时间后自动淡出？

<!-- include jQuery library -->
<script type="text/javascript" src="./_js/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    //On mouse over those thumbnail
    $('.item-caption').hover(function() {

        //Display the caption
    $(this).find('.caption').stop(false,true).fadeIn(200);
    },
    function() {    

    //Hide the caption
    $(this).find('.caption').stop(false,true).fadeOut(600);
});

});
</script>

</head>
<body>

    <div class="item-caption"><a href="http://www.domain.com">
        <div class="caption">   
            <ul>
                <li><h2>TITLE</h2></li>
                <li><h3>Description</h3></li>
            </ul>       
        </div>
        <img src="./_img/example_image.jpg"></a>
    </div>

</body>

任何想法，想法将不胜感激。

克里斯

【问题讨论】：

标签： jquery ios hover

【解决方案1】：

您可以使用 navigator.userAgent.match 来检测移动设备，如下所示：

onMobile = false;
// Mobile device detect - terrible, yes, but whatever
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/Blackberry/i)
){
onMobile = true;                   
}

现在在您的 document.ready 中或任何您想要的地方 - 检查 onMobile 是否为真，如果是则执行您的操作。

【讨论】：

用户代理检测是一个可怕的想法——特征检测几乎总是一个更好的方法。如果你想检测触摸行为，你可以在 Touch 上使用特征检测。有关信息，请参阅*.com/questions/4643443/…。

【解决方案2】：

您可以通过功能检测来检测触摸设备，然后通过延时fadeOut() 相应地调整您的行为：

$(document).ready(function() {

    function hasTouch() {
        try {
           document.createEvent("TouchEvent");
           return(true);
        } catch (e) {
           return(false);
        }    
    }
    var touchPresent = hasTouch();

    //On mouse over those thumbnail
    $('.item-caption').hover(function() {

        //Display the caption
        var caption = $(this).find('.caption');
        caption.stop(true, true).fadeIn(200);
        // on touch systems, fade out after a time delay
        if (touchPresent) {
            caption.delay(5000).fadeOut(600);
        }
    }, function() {    

        //Hide the caption
        $(this).find('.caption').stop(true, true).fadeOut(600);
    });

});

【讨论】：

非常感谢您的 cmets jfriend00 完美运行。一个问题。在我的 HTML 中，我在“item_caption”div 中有一个 url 链接。此链接可以使用鼠标，因为用户必须先将鼠标悬停在图像上，然后单击以激活 url.Hoverer on
@user1741348 - 我不明白你的问题。您希望链接在触摸系统上的行为是什么？
道歉不小心发送了一半完成的评论。在触摸设备上，用户触摸以触发悬停动作并显示标题，然后他们必须再次触摸才能转到 url。一切都按预期工作，除非用户触摸然后暂时什么都不做，定时延迟开始并且标题再次消失（如预期的那样）。但是，您可能希望“悬停”功能现在已重置，但如果用户再次触摸而不是标题再次淡入，则 url 正在激活。
希望我已经解释过了，因为它有点难以用语言表达。请找到一个测试页面的链接，这可能有助于澄清：youmeusdesign.com/caption_mob -亲切的问候克里斯
@user1741348 - 您正在淡出<a> 标签内的内容，而不是<a> 标签本身。这可能会导致问题，因为链接标签仍然存在。如果您不希望链接在淡出时出现，则将链接放在容器 div 中并淡出容器 div。