Question

我不确定为什么但是当我触摸我正在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; }

非常感谢任何帮助。

非常感谢

Answer 1

我有时会遇到同样的“问题”（实际上这是正确的行为）。要修复它，你需要一些javascript。

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

1）在<head>部分中包含生成的脚本：如果支持触摸事件，Modernizr将在页面的<html>元素中添加“触摸”类，如果他们不是，那就是“不接触”课程。

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，你应该知道按类is not easy选择元素。

3）最后，以这种方式更改你的css选择器：

.projectContainer:hover .projectOverlay, .projectContainer-hover .projectOverlay {
    // ...etc...    
}

注意：此方法根本不完美，因为现在许多笔记本电脑都启用了触控事件。任何启用了触摸事件的设备都需要双击才能实现。由你来决定它是否值得！

Atm我认为唯一的替代方案是用户代理欺骗， 确实要避免 。

触摸时防止超链接并显示悬停状态

1 个答案: