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

How to disable hover effects on mobile devices?

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

Share this post


Link to post

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.

Share this post


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!!

Share this post


Link to post

Create an account or sign in to comment

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

Sign in to follow this  

×
×
  • Create New...