如何在支援觸摸的瀏覽器中複製長觸摸的懸停效果？

使用觸控手勢模擬懸停效果

場景：

您有一個網頁，其中包含使用CSS 設計樣式的HTML 元素。具體來說，您的元素具有「懸停」效果，當遊標懸停在它們上方時，它們的顏色會改變。但是，在支援觸控的瀏覽器中，您希望在長觸控時複製此行為。

解決方案：

要實現此目的，請按照以下步驟操作：

1. 修改CSS：將以下類別加入要啟用懸停效果的HTML 元素中：

<code class="css">p {
  color:black;
}

p:hover, p.hover_effect {
  color:red;
}</code>

這可確保「hover_effect」 " 類別複製了":hover" 偽類的樣式。

2. 新增JavaScript: 使用jQuery 實作以下程式碼：

<code class="javascript">$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});</code>

3. 阻止預設瀏覽器行為： 要封鎖器的預設觸控操作（例如上下文選單），請將以下CSS 新增至樣式表：

<code class="css">.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}</code>

這種修改組合允許在符合條件的元素上進行觸控並按住手勢，以模擬支援觸控的瀏覽器的懸停事件。

以上是如何在支援觸摸的瀏覽器中複製長觸摸的懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！