You could also use ontouchend, ontouchstart or ontouchmove. This also miraculously makes the CSS rule :hover work on other elements in the body. Add a ontouchmove attribute to the html element This miraculously makes the CSS rule :hover work on other elements. Here are a few very simple options, that I came up with having a new iPhone 11 around for a couple of days.
CSS HOVER EFFECTS ON MOBILE HOW TO
We need better solutions! How to make :hover work on Safari iOS on iPhones and iPads. There are examples on the internet how to fix that, like adding an onclick attribute to every element you want the :hover rule for, but that’s adding a lot of code, and the elements the don’t hide again when you click somewhere else. An iPhone with mobile Safari doesn’t do :hover, breaking compatibility for old sites, and forcing webdevelopers to use `Javascript` for these trivial things. But remove all CSS and magically your HTML will be responsive, except for tables and large images, but at least you can scroll them into sight so everything is still accessible. Well there was no max-width, so designers had not much choice. It’s the CSS that destroyed it, by setting explicit width. Plain HTML is and has always been responsive. Keep sites accessible without forcing Javascript.īut they don’t work on iPhone or mobile Safari, so we need a solution for that. That is smart thinking, and good care for compatibility.
CSS HOVER EFFECTS ON MOBILE ANDROID
Hover events work on mobile Android or Firefox browsers, as those browser vendors looked for compatibility, and made a click with your fingers act like hover on elements that are not a link. So those nice old style CSS-only dropdown menu’s won’t work on your phone, because the depend on :hover. So touch events don’t know about hover, cause that is a mouse event. The official terms here are: mouse-events, touch events, and pointer events, for both mouse and touch events. Well they can, but nothing is happening then. There is major difference: a mouse can click, drag and hover above the screen, while your fingers can click and swipe, but not hover. Mobile phones don’t have a mouse, your greasy fat touchy fingers have to do the job, they kinda act like a giant mouse.
0 kommentar(er)
