Jump to content

touchscreen hover effects 7.1

Recommended Posts

A general technical note for folks. Technically there is no hover on mobile devices. The concept of hovering requires a pointing device that is connected and communicating to the device the fact that the pointer is hovering over something.

OK now we got that out of the way.

I just touched and held your links in Chrome inspector using it's mobile testing feature and the hover effect did come through there.

My reading suggests that different mobile browsers may or may not honor the hover effect. Further the "solution" is for every hover effect you also need to add an equivalent focus and active for mobile. Something like the following.

h1:hover, h1:focus, h1:active {

  background-color: red;

Apparently order is import.

What happens when you touch and hold a heading on your phone? Does it strikethrough? What phone make, os, and browser are you using?

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

I modified my CSS to:

.nav-gif-wrapper:hover, .nav-gif-wrapper:focus, .nav-gif-wrapper:active {
    text-decoration: line-through 3px;

Still don't see anything on my iphone 8, chrome browser—when I hold my finger on the heading it opens a menu native to chrome, no visible effects. The interesting thing is the very bottom "This is the end." link maintains its desktop hover effect in my mobile browser. Both code blocks.


Edited by penpen
Link to comment

Just tried on my ancient iPhone 5/iOS 10.x/Safari. If I touch and hold a pop-up menu appears. So obviously that isn't what is desired as far as how the link reacts visually.

I did notice that the browser did add a grayish background around the link making it kind of look like a button for a second. An example of how Safari on iPhone handles giving the user feedback when clicking on a link.

Hopefully someone will have an answer for you.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 years later...
Posted (edited)

Did anyone found a solution for this? Squarespace proposed this template HAWLEY as a starting point, we have done the entire website only to found out after all the work was produced that the key feature of the template doesn't work on mobile when we hover over it selects the text and the effect doesn't work, it is so disappointing, this template should not be advertised, as you can see in the attached movies wen I hover with my finger over the text it selects the text, why wasn't this tested before making the template available SS? Creedon can you help me with this, would really appreciate it. 

Thank you so much


Iphone Pro 14 on Safari:

Edited by Maldini
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.