This time I will bring you a DIV that binds mouse events and expands from bottom to top when sliding. DIV binds mouse events and expands from bottom to top when sliding. What are the precautions?. Here are the actual cases. , let’s take a look.
When the mouse floats, the p slowly expands from bottom to top.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery响应鼠标实现p由下向上展开</title>
<style type="text/css">
.big{position:relative; width:234px; height:300px; background:#ccc}
.show{position:absolute; display:none; bottom:0px;display:block; width:100%; height:auto; background:#f66 }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".big").hover(function () {
$(".show").stop(true,true).animate({height:"70px"});
}, function () {
$(".show").stop(true,true).animate({height:"0px"});
});
});
</script>
</head>
<body>
<!--灰色的p-->
<p class="big">
<!--红色的p-->
<p class="show"></p>
</p>
</body>
</html>Principle:
① First of all, the red p is positioned absolutely through position:absolute, and through relative and bottom positioning, such as bottom:0px. ② The bottom positioning is fixed and expands upward when the height becomes higher.
③ Use jQuery’s
$().animate() animation method to control the height change of the red p.
Detailed explanation of the steps to implement the electronic clock function with jQuery
Detailed explanation of the use of Angular5 routing parameters
The above is the detailed content of DIV is bound to mouse events and expands from bottom to top when sliding.. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
