How to Replicate Hover Effects for Long Touches in Touch-Enabled Browsers?

Simulating Hover Effects with Touch Gestures

Scenario:

You have a webpage with HTML elements styled using CSS. Specifically, you have elements with a "hover" effect, where their color changes when the cursor hovers over them. However, in a touch-enabled browser, you want to replicate this behavior for long touches.

Solution:

To achieve this, follow these steps:

1. Modify CSS: Add the following class to your HTML elements for which you want to enable hover effects:

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

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

This ensures that the "hover_effect" class replicates the styling of the ":hover" pseudo-class.

2. Add JavaScript: Implement the following code using jQuery:

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

3. Prevent Default Browser Behaviors: To prevent the browser's default touch actions (e.g., context menu), add the following CSS to your style sheet:

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

This combination of modifications enables touch-and-hold gestures on eligible elements to simulate hover events for touch-enabled browsers.

The above is the detailed content of How to Replicate Hover Effects for Long Touches in Touch-Enabled Browsers?. For more information, please follow other related articles on the PHP Chinese website!