Can someone help me figure out why my custom description isn't following my mouse pointer during the 'mousemove' event on an image?
I've provided the HTML code below:
<!DOCTYPE html>
<html lang="en>
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<div>
<img src="images/wolwerine.jpg" alt="Wolverine" hovermytext="She is doubting my capabilities." class="wolverineClass" id="wolverineId" />
</div>
<div class="wolverineHoverText">
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Check out the custom CSS code below:
.wolverineHoverText{
height: 40px;
width: 300px;
position: absolute;
padding: 40px 80px;
border: 1px solid #106c90;
background: #da8808;
display: none;
color: #ffffff;
font-size: 20px;
top:20px;
left:20px;
}
img{
height: 600px;
width: 900px;
opacity: 0.5;
}
And here is the jQuery code snippet from custom.js:
$(document).ready(function(){
$('.wolverineClass').mousemove(function(y){
var x = $(this).attr('hovermytext');
$('#wolverineHoverText').text(x).show();
$('#wolverineHoverText').css('top',y.clientY+10).css('left',y.clientX+10);
}).mouseout(function(){
$('#wolverineHoverText').hide();
});
});
If you have any doubts or suggestions, drop a comment below!