顯示：沒有鏈接點擊iPhone

Question

在我的網站（這是通過WordPress運行），我有一系列可點擊的圖像縮略圖。當您將鼠標懸停在縮略圖上時，縮略圖上會出現一個灰色框。此灰色框出現是可點擊的鏈接，但只有80％的灰色框可點擊。

我的問題是iPhone在點擊時如何反應到這個盒子。當您點擊80％區域以外的任何地方（可點擊區域）時，會出現灰色框。這很棒。但是，如果您點擊此80％區域內的任何地方，系統會自動將您帶到鏈接，而不是出現灰色框。這似乎有點令人困惑的文字形式，所以我畫了一張照片來展示我的問題：

所以說你在iPhone上，並且你看到了你想要點擊的縮略圖。如果您單擊80％區域以外的地方，灰色框就會出現。但是，如果你點擊這個80％的區域（即實際鏈接的區域），那麼你甚至不會看到應該出現的灰色懸停框而重定向到外部源。這就是問題。我希望它能夠像計算機上的工作一樣工作，所以如果您使用的是iPhone，並且您在縮略圖上的任意位置單擊，則灰色懸停框應始終顯示，而不是將您重定向到外部鏈接。因爲這個將用戶鏈接到iPhone上的外部源的80％區域設置爲display:none，並且對用戶來說基本上是不可見的（直到您將鼠標懸停在縮略圖上）。用戶不應該能夠點擊他們看不到的鏈接。

那麼我怎樣才能讓它在iPhone上單擊時總是出現懸停灰框，無論用戶點擊的縮略圖上的哪個位置？任何建議或意見都會很棒。

更新：

這裏是一個讓灰色的div顯示（通過opacity）

$(document).ready(function() { 
$('.entry-image').mouseover(function(){ 
    //show the box 
    $(this).children('.thumbhover').stop().animate({opacity:1},300); 
}); 

$('.entry-image').mouseleave(function(){ 
    //hide the box 
    $(this).children('.thumbhover').stop().animate({opacity:0},500); 
}); 

我還添加了display:none在CSS我thumbhover的div和show()到jQuery的jQuery的所以divs使用的不是顯示器以及opacity:0，然後當你將鼠標懸停在它們上面時，它有一個塊顯示以及一個opacity:1

Answer 1

我在iPhone上修復了這個雙擊/觸摸懸停問題， e可點擊區域display:none;，然後在通過CSS懸停時再次使其可見。像這樣..

.thumbhover {display:none;} 

.entry-image:hover .thumbhoverimg {display:block !important;} 

所以，我提出的可點擊區域無形，然後可見時再次，用戶將鼠標懸停在「入門圖像」分區。這似乎解決了iPhone上的懸停問題。 :)

Answer 2

它似乎，當iPhone用戶觸摸框，首先「懸停」事件被激發（所以灰色框總是顯示），然後「點擊」事件被觸發，所以用戶被引導到如果在80％區域內，則鏈接。問題是，這兩個事件順序發生並立即發生（與計算機不同），因此您甚至看不到灰色框，因爲該頁面已被重新定向到新頁面。

您是否嘗試過在鏈接的onclick事件中顯示灰色框？我的意思是，複製你在「懸停」事件上做的造型過程並將其放入鏈接的「點擊」事件中。

更新回答您的評論：

如果用戶在移動設備上使用，因爲這東西的Javascript這樣您可以檢測：

function isMobileDevices() { 
    return navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) !== null 
} 

而且在這種情況下，採取不同的。例如，這是非常醜陋的，請在「click」事件中通過Javascript打開鏈接，而不是使用真實的<a>鏈接，但如果我們在移動設備中，則只有在第二次或以上時間纔打開鏈接用戶點擊它。爲此，你將不得不跟蹤每個盒子的狀態，有點費力。

或許更好的選擇是研究touch events並相應地管理這些事件。

更新

看你的網站的源代碼，我不能看到你正在使用display:none，因爲你在你的問題中提到。我看到opacity:0，這是不同的。您是否真的嘗試過使用display:none，直到您需要啓動不透明度的動畫效果爲止？

Answer 3

如果您確實想要顯示灰色框，請在第一個元素上設置點擊事件，以使灰色框顯示。然後設置另一個點擊甚至在灰色框帶你去哪裏...

我做了一個演示：

jsfiddle

HTML：

<div id="box"> 
    <a class="link one" href="#first">First click</a> 
    <a class="link two" href="#second">Second click</a> 
</div> 

然後你的腳本：

$('.one').on('click', function(evt) { 
    evt.preventDefault(); 
    console.log('clicked'); 
    $('.two').css({ 
     'top': '0px' 
    }); 
}); 

$('.two').on('click', function(evt) { 
    evt.preventDefault() 
    // outside link 
    alert("You clicked an outside link!"); 
});