What is the usage of hover in javascript-Front-end Q&A-php.cn

What is the usage of hover in javascript

WBOY

Release： 2022-01-05 11:56:19

Original

5580 people have browsed it

In JavaScript, the hover() method is used to specify the function to be run when the mouse pointer hovers over the selected element. You can set the function when the pointer is on the element or when the pointer leaves. function, the syntax is "$(element).hover(inFunction,outFunction)".

What is the usage of hover in javascript

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is the usage of hover in javascript

Thehover() method specifies what to run when the mouse pointer hovers over the selected element. Two functions.

Method triggers mouseenter and mouseleave events.

Note: If only one function is specified, both mouseenter and mouseleave will execute it.

The syntax is:

$(selector).hover(inFunction,outFunction)

Copy after login

Call:

$( selector ).hover( handlerIn, handlerOut )

Copy after login

is equivalent to the following:

$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Copy after login

Note: If only one function is specified, then it Will run on mouseenter and mouseleave events.

Call:

$(selector).hover(handlerInOut)

Copy after login

Equivalent to:

$( selector ).on( "mouseenter mouseleave", handlerInOut );

Copy after login

The example is as follows:

<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").hover(function(){
    $("p").css("background-color","yellow");
    },function(){
    $("p").css("background-color","pink");
  });
});
</script>
</head>
<body>
<p>鼠标移动到该段落。</p>
</body>
</html>

Copy after login

Output result:

What is the usage of hover in javascript

[Related recommendations: javascript learning tutorial]

The above is the detailed content of What is the usage of hover in javascript. For more information, please follow other related articles on the PHP Chinese website!