onmouseover不適用於iPad風景，Safari或Chrome

我目前有一系列圖像，當在桌面上激活onmouseover時，它將在其位置顯示另一圖像。這適用於所有臺式機，手機和平板電腦瀏覽器 - 除iPad Safari/Chrome上的橫屏外。onmouseover不適用於iPad風景，Safari或Chrome

我主要感到困惑，因爲它在人像中工作正常，但是一旦將iPad更改爲風景 - 在圖像上點擊不起作用。我們也有一個腳本，可以更新方向更改頁面，但我認爲這不會引起任何問題。如果我錯了，請糾正我。

這裏是我們的代碼摘錄：

<img src="/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg?width=224&amp;height=224&amp;ext=.jpg" alt="Claire" title="Claire" class="team-member-static4" onmouseover="jQuery(this).attr('src','/getmedia/6abe9a6f-0144-470e-8dc5-3124c1446642/Claire-2.jpg?width=224&amp;height=224&amp;ext=.jpg').stop.toggle();" onmouseout="jQuery(this).attr('src','/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg?width=224&amp;height=224&amp;ext=.jpg');">

非常感謝。

來源

2014-10-01 Chris Kernaghan

確定的圖像沒有被覆蓋的另一個元素？ Z指數的問題？此外，如果您可以提供幫助，則不應將其與內容一起使用。 – evu 2014-10-01 09:43:39

http://stackoverflow.com/search?q=mouseover+mobile - 例如http://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-jquery-in-safari-for -ipad-is-it-possible-PS如何不使用內聯代碼。無法閱讀 - 也縮短了網址 – mplungjan 2014-10-01 09:43:39

我真的不認爲閱讀mplungjan是不可能的，但是感謝您的寶貴意見。我沒有親自寫這段代碼，其中一位開發人員做了 - 但我現在負責尋找解決方案。沒有z-index問題，我可以看到evu。 – 2014-10-01 09:59:23

它看起來是這樣的：

var claire = {} 
$(function() { 
    claire.$img = $("img[alt='Claire']"); 
    claire.on=claire.$img.data("on")+'?width=224&amp;height=224&amp;ext=.jpg'; 
    claire.off=claire.$img.attr("src"); 
    claire.$img.on('mouseover touchstart',function(){ 
    $(this).prop("src",claire.on) // .stop.toggle(); // why toggle? 
    }) 
    .on('mouseout touchend',function(){ 
    $(this).prop("src",claire.off); 
    });

使用

<img src="/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg?width=224&amp;height=224&amp;ext=.jpg" 
alt="Claire" title="Claire" class="team-member-static4" 
data-on="/getmedia/b69c7c54-e84e-486d-b9fb-b89644b0c7fe/Claire-1.jpg" />

來源

2014-10-01 12:29:42 mplungjan

onmouseover不適用於iPad風景，Safari或Chrome

回答

相關問題