Ausführliche Erklärung zur Verwendung von jQuery Mouse Hover Event.hover()-js-Tutorial-php.cn

Ausführliche Erklärung zur Verwendung von jQuery Mouse Hover Event.hover()

黄舟

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

Original

4033 Leute haben es durchsucht

Das .hover()-Ereignis wird in JQuery bereitgestellt, um die Ereignisse „Mouseenter“ (Maus tritt ein) und „Mouseleave“ (Maus verlässt) in Dom zu vereinfachen. Der erste Parameter von Hover (anonyme Methode) stellt dar MouseEnter, und der zweite Parameter stellt MouseLeave dar, was bedeutet, dass zwei Parameter für Hover übergeben werden können. Wie im folgenden Code gezeigt:

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Verwendung von jQuery Mouse Hover Event.hover(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!