Bagaimana jQuery melaksanakan hover synthesis events_jquery

WBOY
Lepaskan: 2016-05-16 15:46:45
asal
1365 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan acara sintesis hover. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Acara sintesis hover jQuery, gunakan acara Hover sintesis untuk membuat panel terlipat, panel boleh dikembangkan dengan menuding tetikus, yang berbeza daripada Kod kesan khas ini berasal dari buku jQuery yang tajam.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

<!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>
Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan