Is there a jquery/js script that will listen for an onHover event?
I'm building a listening library and we want to include the ability to help the website owner detect when a user initiates an onHover event - so they know it was taking the attention of their visitor/user.
Listen for onHoverStart (when they mouse on an element that has an onHover associated with it) & onHoverEnd (when they mouse away from the element).
This is a simple example which works with onmouseenter and onmouseleave I modified from http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
When a user hovers the image gets bigger. When hovering stops the image returns to normal size. You can also customize the function to do what ever you want onmouseenter and onmouseleave
<!DOCTYPE html>
<html>
<body>
<img onmouseover="WhenUserHovers(this)" onmouseout="WhenUserStopsHovering(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function WhenUserHovers() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function WhenUserStopsHovering() is triggered when the mouse pointer is moved out of the image.</p>
<script>
function WhenUserHovers(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function WhenUserStopsHovering(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>
Also you can make use of jQuery (a javascript library) mouseenter and mouseleave http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseleave
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
Or jQuery's mouseover and mouseout http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseover_mouseout
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
The difference between jQuery's mouseenter/mouseleave and mouseover/mouseout is mouseenter works when the mouse pointer enters the selected element while mouseover works when the pointer enters the element or any child elements of the element.
to detect the hover with jquery use this
$("selector").hover(function(){
//do something when it is hover
},function(){
//do something when you lose hover
});
you can read more about this here https://api.jquery.com/hover/
onmouseenterandonmouseleave.hover(). api.jquery.com/hover