Hover effects play an important role for user experiences in website design, often serving a functional purpose or a pleasant interaction experience. However, hover effects, such as color changes or animations triggered when hovering over elements with a cursor are only relevant to desktops, and are redundant on touch devices where there’s no cursor. In this tutorial, we’ll explore how to disable hover effects on touch devices or mobile devices in Divi using a PHP code snippet or a setting in our Divi Responsive Helper plugin.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Responsive Helper!
Why work so hard? You can do this easily with a setting in our Divi Responsive Helper plugin!
Add Some PHP Code Snippet To Disable Hover Effects On Mobile
This code is designed to disable hover effects on touch devices and adjust CSS rules accordingly. When users interact with a website on touch devices like smartphones or tablets, hover effects (such as changing color or appearance when hovering over a link) are not relevant because there’s no cursor to hover with. So you can add this code to turn off hover effects since they are not needed. You can copy and paste the PHP code snippet into your site. We have instructions about where to add that in the toggle below.
This is one of the most advanced code snippets we have ever provided, so I want to clearly note that this is not for everyone! Adding PHP to your site should be done carefully, as it could easily break your site if there is any conflict. Please only add this code on a staging site.
Please note that we make no warranty or guarantee on this. However, if you use the setting in Divi Responsive Helper (see below), then of course we would offer support as needed.
Where To Paste The PHP Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.
if (!function_exists('pac_drh_disabled_hover_effects')):
function pac_drh_disabled_hover_effects()
{ ?>
<script type="text/javascript" id="pac-drh-disabled-hover-effects">
// Wait for the document to be fully loaded before executing the script
jQuery(document).ready(function () {
// Check if the device supports touch events
let isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints;
// Set a timeout to ensure that the DOM is fully loaded
setTimeout(function () {
// If the device supports touch events
if (isTouchDevice) {
// Remove the hover effect class from elements with class 'et_multi_view__hover_selector'
let mViewHoverEle = $('.et_multi_view__hover_selector');
if (mViewHoverEle.length > 0) {
mViewHoverEle.removeClass('et_multi_view__hover_selector');
}
// Listen for touchstart event and remove hover effect class accordingly
window.addEventListener('touchstart', function () {
if (mViewHoverEle.length > 0) {
mViewHoverEle.removeClass('et_multi_view__hover_selector');
}
}, {passive: false});
// Iterate through CSS rules to replace :hover with custom class
let sheetCount = document.styleSheets.length;
let lastSheet = document.styleSheets[sheetCount - 1];
let ruleCount;
if (lastSheet.cssRules) {
ruleCount = lastSheet.cssRules.length;
} else if (lastSheet.rules) {
ruleCount = lastSheet.rules.length;
}
if (ruleCount > 0 && ruleCount !== undefined) {
let i;
for (i = 0; i < ruleCount; i++) {
let styleSheet = lastSheet.cssRules[i];
if (undefined !== styleSheet.selectorText && styleSheet.cssText.indexOf(':hover') >= 0) {
styleSheet.selectorText = styleSheet.selectorText.replace(/:hover/g, '.pac_drh_responsive_hover_effect:hover');
}
}
}
// Modify CSS rules to remove :hover effects except for specific cases
try {
for (let si in document.styleSheets) {
let styleSheet = document.styleSheets[si];
if (!styleSheet.cssRules) continue;
for (let ri = styleSheet.cssRules.length - 1; ri >= 0; ri--) {
if (!styleSheet.cssRules[ri].selectorText) {
continue;
}
let selectorText = styleSheet.cssRules[ri].selectorText;
if (selectorText.match(':hover') && !selectorText.includes('.nav li.et-touch-hover > ul') && !selectorText.includes('.nav li:hover > ul')) {
styleSheet.deleteRule(ri);
}
}
// Insert a CSS rule to remove text decoration from links except buttons
styleSheet.insertRule('a:where(:not(.wp-element-button)){text-decoration: none !important;}', 0);
}
} catch (ex) {
// Handle any exceptions silently
}
}
}, 500); // Delay execution by 500 milliseconds
});
</script>
<?php
}
add_action('wp_footer', 'pac_drh_disabled_hover_effects');
endif;Here’s a breakdown of what the code does in simpler terms:
- Checks For Touch Devices: The script first checks if the device supports touch events, indicating if it is a touchscreen device.
- Removes Hover Effects: If it’s a touchscreen device, the script removes the hover effect class from certain elements on the webpage. This prevents unintended hover effects when users interact with the screen.
- Modify CSS Rules: The script goes through the CSS rules on the webpage and replaces any instances of “:hover” with a custom class. This ensures that hover effects are disabled across the page.
- Adjusts Link Styles: The script modifies CSS rules to remove text decoration from links, except for buttons. This ensures that links remain visually clean and unobtrusive on touch devices.
We hope you enjoyed this free tutorial!
Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
Here is the setting when using our plugin, it doesn’t get easier than this!
0 Comments