Home >Web Front-end >Front-end Q&A >How to implement jquery to display when the mouse passes and hide when leaving
How to implement jquery to display when the mouse passes and hide when leaving
- 青灯夜游Original
- 2022-04-22 14:35:153424browse
Method: 1. Use the hover() method to bind mouse events to the parent element, and specify two event processing functions, with the syntax "parent element.hover (passing function, leaving function)"; 2. After In the function, use "child element.show()" to display the child element; 3. In the leaving function, use "child element.hide()" to hide the child element.
The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.
jquery realizes the mouse passing display and leaving the hiding effect
Implementation method:
Use hover () method binds mouse events to the parent element, and specifies two event processing functions--the passing display function and the leaving hidden function
In the passing function, use show() to display the child Element
In the leaving function, use hide() to hide the child element
Implementation example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div{
border: 1px solid red;
height: 100px;
}
p{
background-color: pink;
display: none;
}
</style>
<script>
$(function() {
$("div").hover(function() {
$("p").show();
}, function() {
$("p").hide();
});
})
</script>
</head>
<body>
<div>
<p>
p元素，默认是隐藏的，当鼠标经过时显示，离开时隐藏
</p>
</div>
<br>
<span>使用鼠标悬停div元素</span>
</body>
</html>
Description:
hover() method specifies two functions to be run when the mouse pointer hovers over the selected element.
Method triggers mouseenter and mouseleave events.
Note: If only one function is specified, both mouseenter and mouseleave will execute it.
Syntax:
$(selector).hover(inFunction,outFunction)
| Parameters | Description |
|---|---|
| inFunction | Required. Specifies the function to run when the mouseenter event occurs. |
| outFunction | Optional. Specifies the function to run when the mouseleave event occurs. |
[Recommended learning: jQuery video tutorial, web front-end video】
The above is the detailed content of How to implement jquery to display when the mouse passes and hide when leaving. For more information, please follow other related articles on the PHP Chinese website!