How to disable hover effect on posts mobile version

hi,
Im having difficulties finding how to disable the hover effect (that gives a background shade to display the post title when hovering over it). Id like to disable it for tablet and mobile versions since the hover effect isnt efficient for those circumstances.
does anyone know if its doable directly through elementor? do I need a CSS code to be added?
thanks in advance to anyone who can help,
Marc

Hi!
i’m not sure why u want to do that, but here, u can use a media query in css so that when the width of the screen gets to a certain point the hover effect gets disabled, so like this
@media screen and (max-width: 499px) {
/the element/:hover {
/here u disable what u want/
}
}
P.S i don’t think this is the best solution tho, bc it would disable the hover effect every time the browser gets smaller than the max-width number u use.
So u may wanna use js to detect if the device is a mobile but that would be harder

hi @7midaLkesal
thanks for the CSS code, thats so helpful. Im definitely noting it down for future situations. I didnt really think of that important detail you mentioned on shrinking browsers (as for smaller computer screens) which definitely goes against the goal. so thanks for the note, that was really helpful.

Np dude. and look i think the best solution is to use js to detect if the device is mobile with regex.
but in order to do so u’ll have to.
HTML
add a new element same as the one u want to cancel the hover, give it the same css code but don’t give it the hover effect and give both of them ids.
CSS
make the normal one display:/what ever display your using/
and give the new one display:none.
And now we go to js.
JS

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  // true for mobile device
  document.getElementById('/*the new element's id*/').style.display = "/*what ever display ur using */";
  document.getElementById('/*the normal element's id*/').style.display = "none";
}

so basically what this is going to do is if the device is mobile it’ll remove the element with the hover effect and show an other one that looks the same but doesn’t have the hover effect
and if it’s not a mobile then nothing will happen u’ll have the normal element with the hover effect.
But still this is not a perfect solution.

oh man thats awesome. thats exactly all I needed! Im definitely trying that just to see how it’ll take so I understand it better. bc I defiitely agree on the best solution being to leave the effect enabled.
thanks again, so so much.

1 Like