Heim > Artikel > Web-Frontend > Ausführliche Erklärung zur Verwendung von jQuery Mouse Hover Event.hover()

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

黄舟Original: 2017-06-26 11:06:374034Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in die Verwendung von JQuery-HoverNächster Artikel：Einführung in die Verwendung von JQuery-Hover

In Verbindung stehende Artikel

Mehr sehen