I have a div (fademe) that I need to show every time a user hover's a mouse on another div.
The problem is that there is no hover for mobile browsers and I'm having a hard time to get a working solution for every devices.
This is my code working on desktop devices:
<!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>
You should use touchstart and touchend events for mobile.
$('body').on('mouseover touchstart', '#idOfMyElement', function(e){ });
$('body').on('mouseout touchend', '#idOfMyElement', function(e){ });