Implementing hover effect for iOS using JavaScript

Other Questions JavaScript
1

Hi everyone! I’m building a website and want to add a hover effect that works on iOS devices. I’ve written some JavaScript code, but I’m not sure if it’ll work since I can’t test it on an actual iOS device. Can someone take a look and let me know if this is the right approach?

let menuItems = document.querySelectorAll('.menu .submenu #liftup img.item-icon');

menuItems.forEach(item => {
  item.addEventListener('touchstart', function(event) {
    event.preventDefault();
    this.classList.toggle('active');
  });

  item.addEventListener('touchend', function() {
    this.classList.remove('active');
  });

  item.addEventListener('touchcancel', function() {
    this.classList.remove('active');
  });
});

I’m pretty new to this, so any advice would be really helpful. Thanks in advance!

2

I’ve dealt with similar iOS touch events before, and your approach is on the right track. One thing to consider is the 300ms delay iOS adds to click events. To combat this, you might want to look into using the ‘touchstart’ event for immediate feedback.

Also, don’t forget about accessibility. Some users rely on assistive technologies, so make sure your hover effects have keyboard-accessible alternatives.

Lastly, testing on actual iOS devices is crucial. Emulators can miss subtle differences. If you don’t have access to an iOS device, services like BrowserStack or LambdaTest can be lifesavers for cross-device testing.

Keep iterating and testing - you’ll get there!

3

hey there! ur code looks pretty good, but iOS can be tricky. Maybe try adding a ‘touchmove’ event listener too? it might help smooth things out. also, watch out for scrolling issues - sometimes touch events can mess with that. good luck with ur project!

4

Your approach is sound, but there are a few considerations for iOS. First, ensure you’re using the ‘passive’ option in your event listeners to improve scrolling performance. Like this:

item.addEventListener('touchstart', function(event) {
  // Your code here
}, { passive: false });

Also, be aware that iOS has a ‘hover’ state that persists after the first touch until another element is tapped. You might want to add a global touch handler to reset all ‘active’ states when tapping outside your menu items.

Lastly, consider using ‘pointer’ events instead of touch events for better cross-platform compatibility. They work well on both touch and mouse interfaces.