使用CSS3觸摸事件的懸停效果

我正在使用CSS3懸停和轉場來顯示和隱藏圖像。在移動設備上，我想對觸摸事件使用相同的轉換。使用CSS3觸摸事件的懸停效果

基本上，第一次觸摸會執行懸停效果或翻滾，並且觸摸將執行滾動。

我想遠離使用JavaScript來做到這一點。如果有一種方法可以用純CSS3來完成，那將是最好的選擇。

2011-11-30 mattwallace

你問題其實是相當模糊的;我不確定你是在問怎麼做，或者只能用CSS來完成。如果你想了解更多關於如何在javascript中完成的信息，請更新你的問題，我可以更新我的答案:) – rlemon

*你的問題;-) –

[：active pseudo-class可能重複不起作用移動Safari瀏覽器]（https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari） – JakeGould

在您的css中使用:active僞類，然後將ontouchstart=""和onmouseover=""添加到body標籤。

下面的代碼是從我的網站中摘錄，其中我有變得越來越小，發出白光，徘徊的時候（上個）或按住（在觸摸設備上）

<style> 
.boxbutton:active{ 
    -webkit-transform:scale(0.9); 
    -moz-transform:scale(0.9); 
    -ms-transform:scale(0.9); 
    -o-transform:scale(0.9); 
    transform:scale(0.9); 
    -webkit-box-shadow:0px 0px 20px #FFF; 
    -moz-box-shadow:0px 0px 20px #FFF; 
    -o-box-shadow:0px 0px 20px #FFF; 
    box-shadow:0px 0px 20px #FFF; 
} 
</style> 


<body ontouchstart=""> 
    <a href="#teamdiv"> 
     <div class="boxbutton" id="teambb"> 
      <h5>Team</h5> 
     </div> 
    </a> 
</body>

以下編輯釦子不再是相關的，因爲我已經刪除了原始的，不正確的指令，但如果你在這裏，這些前仍可能有幫助

編輯：我發現它的工作原理，如果更可靠，而不是把ontouchstart=""在每一個環節，把它放在<body>標籤中。所以，你的身體標記看起來應該是這樣<body ontouchstart="">和你的鏈接看起來像這樣

<a href="#teamdiv"> 
    <div class="boxbutton" id="teambb"> 
    <h5>Team</h5> 
    </div></a>

編輯2：我想通了，而不是複製你的CSS和使用屏幕大小的查詢桌面，只需添加`的onmouseover =「」，所以：活動僞類將被桌面上的鼠標和觸摸移動設備調用。如果你這樣做，你可以忽略關於媒體查詢的散漫情況。

來源

2012-10-26 03:23:30

thx，適合我。 – Mario

這工作。謝謝。但我很想解釋爲什麼* ontouchstart =「」和onmouseover =「」達到了預期的效果。對我來說當然不是不言而喻。 –

嗯，我可能不是最好的人來解釋這一點，但我的理解是這樣的：ontouchstart和onmouseover是聽衆，他們等待所涉及的元素被觸摸或矇蔽（在這種情況下），然後將調用在引號內命名的javascript函數。在我們的例子中，我們將引號留空，所以沒有執行腳本，但由於監聽器在那裏，Web瀏覽器仍然認爲它們是活動的。如果當前使用javascript活動的僞類被應用於元素，監聽器導致：應用活動僞類。 –

如果你不想修改你的HTML代碼，你可以試試這個：

<script> 
    document.body.addEventListener('touchstart',function(){},false); 
</script>

來源

2013-09-06 10:00:12 RyanBay

這不起作用。 – matthewpavkov

@matthewpavkov它會工作，但它應該是addEventListener而不是addEventlistener。 –

使用CSS3觸摸事件的懸停效果

回答

相關問題