CODEWITHSUNDEEP
javascriptjquerycss
Collarbone
Collarbone

Reputation: 610

Detect onHover (jquery or css) event with js

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.

enter image description here

Listen for onHoverStart (when they mouse on an element that has an onHover associated with it) & onHoverEnd (when they mouse away from the element).

Upvotes: 0

Views: 747

Answers (2)

Anis Boukhris
Anis Boukhris

Reputation: 421

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/

Upvotes: 0

Chuksy
Chuksy

Reputation: 66

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.

Upvotes: 1

Related Questions