Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to disable hover effects on mobile devices?


MaximilianS

Question

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!

Edited by rhyann
Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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

The

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 post
  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...