Avoid displaying hover effects on touch-enabled devices

Question

Avoid displaying hover effects on touch-enabled devices

Is there a way to prevent touch devices from triggering the CSS hover state without converting all hover styles into mouseover listeners?

I am working on an application that needs to support both touch and pointer input. However, certain hover styles don't work well on touch devices because they tend to keep the hover state even after tapping an object.

Important considerations:

The width of the device does not necessarily indicate if it is touch-enabled. The touch screens we use are desktop-sized monitors.
I do not want to require users to only input via touch on multi-input devices.

javascript html css touch

Answer 1

Answer №1

After successfully resolving this issue by utilizing the method provided in the link shared above, I recommend considering the inclusion of Modernizr for this particular situation. I am open to exploring alternative approaches as well...

Just like how Blender suggests, users can examine touch events using the following code:

html.touch {
  /* Touch Device ~ No Hovers */
}

html.no-touch {
  /* Not a Touch is disabled */
}
html.no-touch .element:hover {
   opacity:.5;
}

Answer 2

After successfully resolving this issue by utilizing the method provided in the link shared above, I recommend considering the inclusion of Modernizr for this particular situation. I am open to exploring alternative approaches as well...

Just like how Blender suggests, users can examine touch events using the following code:

html.touch {
  /* Touch Device ~ No Hovers */
}

html.no-touch {
  /* Not a Touch is disabled */
}
html.no-touch .element:hover {
   opacity:.5;
}

Answer 3

Answer №2

To enhance user experience, I propose adding a hover-active CSS class to the HTML tag and applying it at the beginning of all CSS selectors with :hover. This class will be removed upon the first touchstart event.

For further reference, you can visit: http://codepen.io/Bnaya/pen/EoJlb

Javascript:

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');
    
        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

HTML:

<html class="hover-active">

CSS:

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}

Answer 4

To enhance user experience, I propose adding a hover-active CSS class to the HTML tag and applying it at the beginning of all CSS selectors with :hover. This class will be removed upon the first touchstart event.

For further reference, you can visit: http://codepen.io/Bnaya/pen/EoJlb

Javascript:

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');
    
        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

HTML:

<html class="hover-active">

CSS:

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}

Avoid displaying hover effects on touch-enabled devices

Answer №1

Answer №2

Similar questions

Angular implementation of a filter dropdown with subcategories

Error in fullCalendar where events are appearing on incorrect days in the month view of the current month

The interactive form fields are not functioning as intended due to a dynamic association issue

Displaying images dynamically in a gridview from a hard drive source

Attempting to position items within a container

Leveraging the power of the three.js library on the client-side within a vue.js/n

Retrieve the value from every dynamically generated text box by its corresponding number

Begin 5 seconds after loading

Is there a way to control the text animation loop on iTyped, both starting and stopping it?

Creating a layout in jQuery Mobile with two HTML <input type="button"> elements positioned side by side and each taking up 50% of the screen

There seems to be an issue with connecting to the local server at https://localhost:3000/socket.io/ while using a

Creating a smooth transition effect on text length using Javascript and CSS: Fading the text as it

What is the best way to capture the return value following an async/await function?

Choosing the initial tab to display when the page loads from a selection of 3 tabs

Obtain the templateUrl using the ui-router functionality

Can you explain how to utilize theme values in CSS within Mui?

Eliminate the Border from Bootstrap 5 navigation-toggler through standard css styling

Tips for showing the chosen value of a ModelChoiceField in Django

The Jquery Ajax .load() function is not working properly

I am interested in developing a JavaScript program that can calculate multiples of 0.10