2

我不知道为什么，但是当我在我正在 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; }

任何帮助将不胜感激。

非常感谢

4

1 回答 1

2

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

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

1）在您的部分中包含生成的脚本<head>：如果支持触摸事件，Modernizr 将向您的页面元素添加一个“触摸”类，如果不支持，则添加一个“非触摸”类。<html>

2）如果启用了“触摸”事件，我们需要添加一个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，您应该知道按类选择元素并不容易。

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

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

注意：这种方法一点也不完美，因为现在许多笔记本电脑也启用了触摸事件。如果您实现它，任何启用了触摸事件的设备都需要双击。是否值得由您决定！

Atm 我认为唯一的选择是用户代理欺骗，你真的想避免。

于 2013-05-20T09:36:09.733 回答