jQuery가 호버 합성을 구현하는 방법 events

집

웹 프론트엔드

JS 튜토리얼

jQuery가 호버 합성을 구현하는 방법 events_jquery

May 16, 2016 pm 03:46 PM

hover jquery 합성 이벤트

이 기사의 예에서는 jQuery가 호버 합성 이벤트를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

jQuery hover 합성 이벤트, 합성 Hover 이벤트를 사용하여 접힌 패널을 만들고, 클릭과 다른 점은 패널을 확장할 수 있다는 점입니다. 이 특수 효과 코드는 날카로운 jQuery 책에서 따왔습니다.

런닝 효과 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;jQuery hover合成事件&lt;/title&gt;
&lt;script src="jquery1.3.2.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;style&gt;
*{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; }
&lt;/style&gt;
&lt;script type="text/javascript"&gt; 
$(function(){
 $("#panel h5.head").hover(function(){
  $(this).next("div.content").show();
 },function(){
  $(this).next("div.content").hide(); 
 })
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="panel"&gt;
 &lt;h5 class="head"&gt;什么是jQuery&#63;&lt;/h5&gt;
 &lt;div class="content"&gt;
  jQuery hover合成事件，利用合成Hover事件制作折合面板，鼠标Hover上面即可展开面板，与Click不尽相同，此特效代码来自锋利的jQuery一书。
 &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.