Detailed explanation on the use of jQuery mouse hover event.hover()-JS Tutorial-php.cn

Detailed explanation on the use of jQuery mouse hover event.hover()

黄舟

Release： 2017-06-26 11:06:37

Original

4033 people have browsed it

The .hover() event is provided in JQuery to simplify the mouseenter (mouse enters) and mouseleave (mouse leaves) events in Dom. The first parameter of hover (anonymous method) represents mouseenter, and the second parameter represents mouseleave, which means that two parameters can be passed for hover. As shown in the following code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  <style>
  ul {
    margin-left: 20px;
    color: blue;
  }
  li {
    cursor: default;
  }
  span {
    color: red;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li class="fade">Chips</li>
  <li class="fade">Socks</li>
</ul>
 
<script>
$( "li" ).hover(//为li绑定了鼠标进入和鼠标移开的两个参数
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
  }
);
 
$( "li.fade" ).hover(function() {<pre name="code" class="html" style="color: rgb(51, 51, 51); 
font-size: 14px; line-height: 26px;">//为li元素下的class类是fade的所有元素绑定了鼠标进入参数
$( this ).fadeOut( 100 );
 $( this ).fadeIn( 500 );});
</script> 
</body>
</html>

Copy after login

The above is the detailed content of Detailed explanation on the use of jQuery mouse hover event.hover(). For more information, please follow other related articles on the PHP Chinese website!