This time I will bring you jQuery to bind mouse rollover events to DIVs (with code). What are the precautions for jQuery to bind mouse rollover events to DIVs? The following is a practical case. Get up and take a look.
<!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, the red p is positioned throughposition:absoluteabsolute positioning , and positioned relative to the bottom, 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.
How to print log information from console
The above is the detailed content of jQuery operates DIV to bind mouse over events (code attached). 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)
