3.0.6 Hover on iPhone & iPad issue?

Everything looks fine in Elements 3.0.6 on all screens and in preview on Mac, and also when I publish and look in the browsers on my Mac.

But on my iPhone and iPad Hover End is not working.

I discovered this yesterday when I replaced my 2.4.4 site with the 3.0.6 version. Am I the only one with this issue? @dan

Not sure how you’re expecting this to work, Touch devices generally don’t support hover states as your finger is either up or down, it can’t detect hover like a mouse on a desktop.

@dan, this is the same issue we already discussed in the Store Partner Section. All hover effects are switched off by Tailwind 4 as a standard on touch devices and thus also in Elements 3. The common hover on tap is not working any more for all hover effects in Elements 3. The potential solution was also discussed there.

I uploaded my Elements 2.4.4 site again and hover (moving a finger over or tap) works just fine on both my iPhone and iPad. So there is something different in Elements 3.0.6 and Tailwind 4. @dan

Feedback on the current version of Elements

Hello everyone,

I’d like to share some feedback on the current version of Elements.

When I place a button in a hover menu, I do so intentionally. In previous versions, as far as I know, this behavior worked without any issues. Unfortunately, since the update, this is no longer possible, which is a significant limitation for my workflow.

This is especially problematic in combination with WeaverPixel’s hover effects, because many designs can no longer be used as intended. As a result, this function has become practically useless for me.

I would really appreciate it if you could reconsider this restriction or at least offer an option that allows every user to decide for themselves how Elements should handle this. One of Elements’ greatest strengths is the freedom it provides in design, and I believe this should not be curtailed by a fixed rule.

It’s also important to me that my projects continue to work on the iPad and iPhone as planned. That’s why I would be very happy if this behavior could be reverted or at least made optionally configurable.

Thank you for taking the time to consider this feedback. I hope you will address this change in a future release.

Hi all,

Here’s an explanation of what’s changed and why.

Touch screens don’t really have hover. There’s no cursor to move over things, so for years iPhones and iPads have faked it: tapping an element would trigger its hover effect. That’s what sites built in Elements 2 were relying on.

Elements 3 is built on a newer styling engine (Tailwind 4), which handles this differently. Hover effects now only run on devices with a mouse or trackpad, and on touch screens they’re switched off entirely. That’s why the same project behaves differently after republishing from 3.0.6. It’s not something you’ve done wrong in your project, and it affects all hover effects, including add-ons like Markus’s.

Why the change? The old tap-to-hover was always a bit of a hack, and it caused real problems: effects would get stuck on after you tapped, there was no clean way to “un-hover” something, and sometimes links needed two taps (one to trigger the hover, one to actually click). So the folks behind Tailwind decided hover should be a nice extra for mouse and trackpad users, with touch screens getting proper tap interactions instead.

That’s the reasoning behind it, but I do understand the frustration of sites that worked one way in Elements 2 now behave differently, and there’s currently no way for you to choose.

The good news: we’re going to add a project-level setting in the near future that lets you bring back the old tap-to-hover behaviour on iPhone and iPad. It’ll be off by default, but if your design relies on hover effects working on touch, you’ll be able to switch it on for that project.

@Blumik, that should cover what you were asking for.

Hope that helps :slightly_smiling_face:

@Blumik @PLM @WeaverPixel

A tap-to-hover on touch devices option is now available in Elements 3.0.7, please note, it’s off by default and needs to be switched on per-project.

Does that option still keep Tailwind 4 everywhere else?

Yes, of course!

Thank you very much for that. And where can I activate this in the future?

In the Advanced Project Settings!