极客教程jQuery hover()方法
jQuery hover()是一个内置的方法，用于指定两个函数，当鼠标指针移动到选定的元素上时启动。
语法:
$(selector).hover(Function_in, Function_out);
这里的选择器是指选定的元素。
参数：它接受两个参数，具体如下-**
- Function_in:它指定了当鼠标进入事件发生时要运行的函数。
- Function_out。它是可选的，指定了当鼠标离开事件发生时要运行的函数。
例子1： jQuery代码显示了hover()方法的工作。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
< !--jQuery code to show the working of hover() method-- >
(document).ready(function () {
("p").hover(function () {
(this).css("background-color", "green");
}, function () {
(this).css("background-color", "yellow");
});
});
</script>
<style>
p {
width: 55%;
height: 80px;
padding: 20px;
margin: 10px;
border: 2px solid green;
font-size: 50px;
}
</style>
</head>
<body>
<!--move the mouse in and out over this paragraph
and background color will change-->
<p>GeeksforGeeks !</p>
</body>
</html>
输出:
例子2：在这个例子中，我们将通过把鼠标悬停在里面和外面来改变字体大小。
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
< !--jQuery code to show the working of hover() method-- >
(document).ready(function () {
("p").hover(function () {
(this).animate({ fontSize: "+=14px"});
}, function () {
(this).animate({ fontSize: "-=14px"});
});
});
</script>
<style>
p {
width: 55%;
height: 80px;
padding: 20px;
margin: 10px;
border: 2px solid black;
font-size: 50px;
background-color: rgb(22, 153, 22);
}
</style>
</head>
<body>
<!--move the mouse in and out over this paragraph
and font-size will change-->
<p>GeeksforGeeks !</p>
</body>
</html>
输出:
