I have a div (fademe) that needs to be displayed whenever a user hovers the mouse over another div.
The issue is that mobile browsers do not support hover events and I am struggling to find a solution that works on all devices.
This is my code for 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>