防止觸摸超鏈接並顯示懸停狀態

我不知道爲什麼，但當我觸摸網站上的鏈接時，我在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; }

任何幫助將不勝感激。

非常感謝

來源

2013-05-19 tobias_burkill

在基於觸摸的設備上，觸摸相當於點擊，沒有'：hover'。 –

請注意，這不是一個答案，但您可能會發現，jQuery touchpunch庫可能會幫助您，因爲它可以爲您在許多場景中自動連線。這意味着它可能無法解決這個問題，但可能會在未來爲你的其他人。有些東西供你考慮和調查。 – origin1tech

沒有：懸停，但至少在safari中有一個css值有-webkit-tap-highlight-color：這可能有幫助。 – BingeBoy

我有時有相同的「問題」（實際上是正確的行爲）。要修復它，你需要一點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，你應該知道他們的類is not easy選擇元素。因爲觸摸事件在許多筆記本電腦也能時下這種方法並不完美可言，：

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

注意：

3）最後，這種方式改變你的CSS選擇器。任何啓用了觸摸事件的設備都需要雙擊才能實現。這取決於你決定是否值得！

大氣壓我認爲，唯一的選擇是用戶代理欺騙，你真的想避免。

來源

2013-05-20 09:36:09 Giona

啊，非常感謝你，Giona很棒。我只遇到過一個問題。如果您觸摸一個項目以使懸停出現，然後觸摸另一個項目，以便先前的懸停消失並顯示新懸浮項目，然後返回以觸摸第一個項目而不是懸停，直到顯示直接進入鏈接。你知道是否有辦法在每次觸摸後重置它？謝謝你的幫助。 –

是的，看到iPad和iPhone上的問題...檢查我的編輯，它應該現在工作;-) – Giona

輝煌，謝謝@Giona作品現在完美，我已經在線更新文件，讓人們可以看到它的工作[lovelldesign。 co.uk]（http://lovelldesign.co.uk/home）。感謝你的幫助。 –

防止觸摸超鏈接並顯示懸停狀態

回答

相關問題