防止超链接的触摸和显示悬停状态

Prevent hyperlink on touch and show hover state

本文关键字：显示 悬停 状态 触摸 超链接      更新时间：2023-09-26

我不知道为什么，但是当我在iPhone/平板电脑上创建网站时，它不会触发悬停状态，而是直接跳转到链接。您可以在这里看到测试站点http://lovelldesign.co.uk/home

链接只是大图像和悬停状态显示项目的名称，这就是为什么悬停状态是由第一次触摸触发的，然后用户需要再次触摸才能进入项目。

我已经搜索了这里的touchstart示例，并试图从他们的工作来解决我自己的问题，但无济于事。

HTML

<div class="projectContainer">
    <a href="<perch:content id="url" label="URL" required="true" />" class="projectOverlay">
        <h1><perch:content id="title" type="text" label="Heading" required="true" /></h1>
    </a> 
    <img src="<perch:content id="image" type="image" label="image" />" />

下面是CSS:

.projectContainer {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 7px;
    height: 100%;
    display: block; }
.projectContainer:hover .projectOverlay {
    opacity: 0.9;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out; }
.projectContainer .projectOverlay {
    opacity: 0;
    background-color: #00152e;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 96%;
    height: 100%;
    padding: 2%;
    color: white;
    text-decoration: none; }

任何帮助都将是非常感激的。

多谢

我有时也有同样的"问题"(实际上这是正确的行为)。要解决这个问题，你需要一点javascript。

首先，让我们检测触摸事件。你可以用Modernizr来做，这是实现它的最小包:http://modernizr.com/download/-touch-cssclasses-teststyles-prefixes

1)包括生成的脚本在您的<head>部分:Modernizr将添加一个"触摸"类到您的页面的<html>元素，如果触摸事件是支持的，一个"no-touch"类，如果他们不。

2)如果"touch"事件被启用，我们需要添加一个javascript监听器来模拟第一次点击时的悬停状态:

if(Modernizr.touch){
    var hoverClass = 'projectContainer-hover', // the "simulated hover" class
        $projectContainers = $('.projectContainer');
    $projectContainers.on('click',function(event){
        var $this = $(this);
        if(!$this.hasClass(hoverClass)){
            event.preventDefault();
            $projectContainers.removeClass(hoverClass);
            $this.addClass(hoverClass);
            return false;
        }
    }).on('focusout',function(){
        // remove the class if the user focuses on another element
        $(this).removeClass(hoverClass);  
    });
}

我假设你正在使用jQuery。如果您不支持旧的ie，并且需要支持旧的ie，那么您应该知道按类选择元素并不容易。

3)最后，这样改变你的css选择器: 
.projectContainer:hover .projectOverlay, .projectContainer-hover .projectOverlay {
    // ...etc...    
}

注:这个方法并不完美，因为现在很多笔记本电脑也启用了触摸事件。任何启用了触摸事件的设备都需要双击。是否值得由你来决定!

我认为唯一的替代方案是用户代理欺骗，这是您真正想要避免的。

相关文章：