touchscreen hover effects 7.1

Site URL: https://coyote-shark-mrrd.squarespace.com/

pswd: brineintopedro

Hello, when I test this site on my phone, I don't get the strikethrough hover effect when my finger touches one of the headings on the homepage, like it does on desktop. Any way to achieve that?

The password doesn't work.

Sorry it's brineintopedro

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.

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.

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.

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

https://www.studioribeiro.com/artworks

Iphone Pro 14 on Safari: