In this SVG, there’s a group that displays another group with identical paths but different text, like a dropdown menu, when hovered over. This works well with a mouse on a desktop, but on touch devices, tapping instantly activates the link, which should be hidden. Here’s a snippet from the SVG for reference, though the placement might seem odd:
I used visibility: hidden thinking it would prevent the links from being clickable, but it seems the hover event is still triggering on tap. I’ve experimented with various CSS selectors, but nothing has worked so far.
Making SVG links unclickable on touch devices, particularly when they are part of hover-triggered dropdown menus, can be a bit tricky. In your case, you have an SVG with groups that display like a dropdown menu on hover, which functions correctly on a desktop using a mouse. However, the issue arises on touch devices where tapping immediately activates the link, even though it’s supposed to be hidden.
Basically, The visibility is the hidden CSS property, that makes these links unclickable. Yet, touch devices often interpret a tap as both a mouse hover and a click event, which is likely why the hidden links are still being activated. To address this, you might need to add additional CSS or JavaScript to distinguish between hover and touch events.
One approach is that you can use is JavaScript to add a class to your SVG when it’s interacted with on a touch device. This class could then be used to override the hover styles and functionality, ensuring that the links remain inactive until a specific action is taken (like a second tap or a different gesture).
Here’s a basic outline of what you could do:
Detect Touch Device: Use JavaScript to detect if the user is on a touch device. You can do this by listening to touch events.
Toggle Classes Based on Interaction: If a touch device is detected, add a specific class to your SVG or the elements within it that disable the hover functionality.
CSS for Touch Devices: In your CSS, use the class added by the JavaScript to change the behavior of the links. You might set pointer-events: none to the links when this class is present, which should prevent them from being clickable.
Optional JavaScript Controls: If necessary, you can add more JavaScript to control when the links become active based on the user’s interactions on touch devices.
Here’s a very basic example:
if ('ontouchstart' in window) {
document.getElementById('Layer_1').classList.add('touch-device');
}
And in your CSS:
css
Copy code
.touch-device a {
pointer-events: none;
}
This is a general guide, and you may need to adapt it based on the specific functionality of your SVG and website.
JavaScript can detect touch capabilities and accordingly modify the behavior of the SVG elements. For example, the user can use a simple detection method like ‘ontouchstart’ in the window to identify if the device supports touch. If it does, JavaScript can add a class to the SVG or specific elements within the SVG.
This class can then be used in your CSS to change the style or behavior, such as setting pointer-events: none or modifying the visibility, to disable hover-triggered actions. This way, the SVG will respond differently depending on whether it’s accessed from a touch device.
Yes, it’s possible, but it requires careful handling, on touch devices, a tap is often interpreted as both a hover and a click event, which complicates the distinction. Using JavaScript, you can set event listeners for touch events (touchstart, touchend) and mouse events (mouseenter, mouseleave).
By managing these events, you can define specific behaviors for taps and hovers. For example, you can prevent the default action on a touchstart event to stop it from triggering hover effects.
CSS alone might not be sufficient to handle the differentiation between hover and touch interactions since CSS can not detect device capabilities. However, media queries can be used to apply styles based on the screen size, which often corresponds to touch devices (like smartphones and tablets). While not foolproof, this method can reduce unwanted hover effects on devices that are more likely to be touch-enabled.
For example, using @media (hover: none) and (pointer: coarse) { ... } in your CSS can target touch screens, but it will not be as accurate as a JavaScript-based solution.