Home >Web Front-end >JS Tutorial >jQuery operates DIV to bind mouse over events (code attached)

jQuery operates DIV to bind mouse over events (code attached)

php中世界最好的语言Original: 2018-06-04 15:30:312384browse

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 through

position: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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

jQuery operates DIV to bind mouse over events (code attached)

Related articles