Jump to content

How to disable hover effects on mobile devices?

Recommended Posts

hey!I want to disable the hover effects on my images only on mobile (touch) devices/ mobile browser.At the moment I am using the following CSS for my hover effect:

.image-caption-wrapper { top: 0 !important; padding-top: 50% !important; font-size: 20px !important; background: rgba(0,0,0, 0.7) !important; text-align: center; pointer-events: none ;}

Do you have any ideas how to disable them on touch devices/mobile browser ?Thanks a lot for your help!

Link to comment
  • Replies 2
  • Views 11.6k
  • Created
  • Last Reply

Hmm. I don't see a declaration that controls the hover state of any element.


pointer-events: none;

declaration says that every element of the class .image-caption-wrapper is never the target of mouse events. See MDN's Article "pointer-events". (By the way, it appears that you have a space between none and the ;?) So, presumably, on touch devices this would render every such element non-responsive to a touch/tap event. (Is this what you really intend?)

This isn't the same as controlling an element's hover state behavior.

In any event, "hover" has no relevance to touch devices since the device can't sense your finger "hovering" over the screen.

If I misunderstand your question or this isn't helpful, please let me know.

I'm a retired attorney who was asked by a friend to build a website. In a prior lifetime, in a galaxy far, far away and long, long ago, I was a computer systems analyst / programmer. I'm a novice autodidact in CSS, JavaScript and HTML learning in part by example.. I've asked questions on this forum and been lucky enough to have others help me, so I'm inclined to answer any question I can. Pay it forward.

Link to comment

Thank you very much for your response!Actually I am not into coding or CSS or anything. I just collected codes and put them in my CSS, but it is only tentative.So maybe it is easier for you when you understand my goal and we go from there. This is exactly what I want for Images on my page:

So at first, I need a CSS or something to do that.And then I want to disable this effect on mobile/touch devices.

(This will also answer my other question ("Add a call to action button on image hover").)

I hope you understand my problem. Thank you very much again!!

Link to comment


This topic is now archived and is closed to further replies.

  • 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.