i am facing issue on jquery while using hover listener event, the code is just working on desktop while on mobile i can't get it to work with the hover listener.So i just wanna implement click function instead of hover when the site is being displayed on mobile and hover on pc/laptop.I am sharing my code below. Also i am using blastjs and animate.css for text animation.
Header Element for the animation
<h2>About Me..</h2>
Jquery Code
$(document).ready(function () {
$("h2").blast({
delimiter: "character",
tag: "span",
});
var pageAbout = $(".about_wrapper");
$(".blast").on("hover", function () {
var el = $(this);
$(this).addClass("animated rubberBand");
$(this).one(
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
function () {
el.removeClass("animated rubberBand");
}
);
});
});
You can check the device width before making the event listener
$(document).ready(function () {
$("h2").blast({
delimiter: "character",
tag: "span",
});
// You choose the event depending on the screen width
let event;
screen.width > 400 ? event = 'hover' : event = 'click'
//
var pageAbout = $(".about_wrapper");
$(".blast").on(event, function () {
var el = $(this);
$(this).addClass("animated rubberBand");
$(this).one(
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
function () {
el.removeClass("animated rubberBand");
}
);
}); });
If the screen.width was not suitable, you can find some ways to detect the device type on this discussion