Tengo un div ( fademe ) que necesito mostrar cada vez que un usuario hover's mouse sobre otro div .
El problema es que no hay hover para los navegadores móviles y me está costando encontrar una solución que funcione para todos los dispositivos.
Este es mi código trabajando en dispositivos de escritorio:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> $("body").on("mouseover touchstart", ".parent", function(e) { $("#fademe").addClass("show"); }); $("body").on("mouseout touchend", ".parent", function(e) { $("#fademe").removeClass("show"); }); #fademe { color:#000; text-align: center; font-size: 14px; float: right; margin: 0 25px; opacity: 0; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } .show { opacity: 1 !important; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="parent"> <div id="fademe"> »» here «« </div> </div> </body> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Eh, what's up doc?</title> <style> .fademe {text-align:center; font-size:14px; float:right; margin:0 25px; opacity:0; -webkit-transition:opacity 5s; -moz-transition:opacity 5s; -o-transition:opacity 5s; transition:opacity 5s;} .show {opacity:1; -webkit-transition:opacity 5s; -moz-transition:opacity 5s; -o-transition:opacity 5s; transition:opacity 5s;} </style> </head> <body> <div class="fademe"> »» here «« </div> <script> $("body").hover( function () { $(".fademe").addClass("show"); }, function () { $(".fademe").removeClass("show"); } ); </script> </body> </html>Debe usar eventos touchstart y touchend para dispositivos móviles.
$('body').on('mouseover touchstart', '#idOfMyElement', function(e){ }); $('body').on('mouseout touchend', '#idOfMyElement', function(e){ });