Looking to eliminate hover effects on touch devices? While it's recommended to use a hover class for hover effects, instead of the hover pseudo-class, for easier removal later on, it can be a challenge if your site is already coded. However, there's a clever solution to target all :hover pseudo-classes in CSS and replace them with :active. The :active pseudo-class should work effectively for your needs, but you may encounter some issues with the JavaScript code. If there are errors, they may be difficult to spot.
function touch() {
if ('ontouchstart' in document.documentElement) {
var sheet = document.getElementById("#pagestyle");
if (sheet.cssRules) {
for (var i = 0; i < sheet.cssRules.length; i++) {
var rule = sheet.cssRules[i];
if (rule.selectorText) {
rule.selectorText = rule.selectorText.replace(':hover', ':active');
}
}
}
}
}.test:hover {}<link id="pagestyle" rel="stylesheet" href="css/style.css">