Maison > Article > interface Web > Comment jQuery implémente la synthèse de survol events_jquery

Comment jQuery implémente la synthèse de survol events_jquery

WBOYoriginal: 2016-05-16 15:46:451355parcourir

L'exemple de cet article décrit comment jQuery implémente les événements de synthèse de survol. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Événement de synthèse jQuery hover, utilisez l'événement de synthèse Hover pour créer un panneau plié, le panneau peut être agrandi en survolant la souris, ce qui est différent de Click. Ce code d'effet spécial provient du livre Sharp jQuery.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery hover合成事件</title>
<script src="jquery1.3.2.js" type="text/javascript"></script>
<style>
*{margin:0;padding:0;} 
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }
</style>
<script type="text/javascript"> 
$(function(){
 $("#panel h5.head").hover(function(){
  $(this).next("div.content").show();
 },function(){
  $(this).next("div.content").hide(); 
 })
})
</script>
</head>
<body>
<div id="panel">
 <h5 class="head">什么是jQuery&#63;</h5>
 <div class="content">
  jQuery hover合成事件，利用合成Hover事件制作折合面板，鼠标Hover上面即可展开面板，与Click不尽相同，此特效代码来自锋利的jQuery一书。
 </div>
</div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Javascript réalise la transformation 3D d'un cercle tridimensionnel example_javascript skillsArticle suivant：Javascript réalise la transformation 3D d'un cercle tridimensionnel example_javascript skills

Articles Liés

Voir plus