Estoy tratando de hacer un mapa de centro comercial interactivo. El código JS funciona correctamente al pasar el mouse. Pero también necesito agregar el clic. Es decir, que funcione de la misma manera al pasar el mouse y hacer clic en el menú.
Aquí está el código JS:
//map var id = 0; $(' .scheme-about__item .menu__link').mouseover(function(e) { id = $(this).attr('data-id'); if(isMobile()) { $('.area-m-' + id).addClass('hover'); } else { $('.area-' + id).addClass('hover'); } console.log($('.area-' + id)); }) .mouseout(function(e) { if(isMobile()) { $('.area-m-' + id).removeClass('hover'); } else { $('.area-' + id).removeClass('hover'); } }); function isMobile() { var res = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|Windows Phone|PlayBook|BB10|Nokia/i); if (res != null) return true; else return false; }Puedes probar este.
//map let id = 0; let menuLink = document.querySelector('.scheme-about__item .menu__link'); menuLink.addEventListener('click',mapFunction); menuLink.addEventListener('mouseover',mapFunction); menuLink.addEventListener('mouseout',mapFunction); function mapFunction(e){ id = e.target.getAttribute('data-id'); if(isMobile()) { document.querySelector('.area-m-' + id).classList.add('hover'); } else { document.querySelector('.area-' + id).classList.add('hover'); } console.log(document.querySelector('.area-' + id) } function isMobile() { var res = navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|Windows Phone|PlayBook|BB10|Nokia/i); if (res != null) return true; else return false; }