如何使用長按模擬觸控螢幕上的懸停效果？

使用長按在支援觸控的裝置上觸發懸停效果

在支援觸控的裝置（例如智慧型手機和平板電腦）上複製懸停效果，您可以利用CSS 和JavaScript 的組合。它的工作原理如下：

HTML 標記

將名為「hover」的類別加入要套用懸停效果的任何元素。例如：

<code class="html"><p class="hover">Some Text</p></code>

CSS 樣式

修改 CSS 以包含 :hover 和 .hover_effect 類別的懸停效果。 .hover_effect 類別將用於模擬觸控裝置上的懸停效果：

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

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

JavaScript

使用 JavaScript 偵測長按事件。以下是使用 jQuery 的範例：

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

此 JavaScript 程式碼為具有「hover」類別的元素新增 touchstart 和 touchend 事件的事件處理程序。當觸控開始或結束時，它會切換觸控元素上的hover_effect類別。

附加CSS

防止瀏覽器顯示上下文選單或要求確認在行動裝置上觸碰元素，新增下列CSS 規則：

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

結果

透過組合這些元素，您現在可以模擬啟用觸控的懸停效果透過長按所需的元素來裝置。此方法可用於建立互動式元素，例如按鈕或鏈接，而無需傳統的滑鼠懸停。

以上是如何使用長按模擬觸控螢幕上的懸停效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！