MaximilianS Posted February 6, 2015 Share Posted February 6, 2015 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
alxfyv Posted February 6, 2015 Share Posted February 6, 2015 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 comment
MaximilianS Posted February 7, 2015 Author Share Posted February 7, 2015 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: http://squarespace.com/templates 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.