이 기사의 예에서는 마우스를 프롬프트 상자 위로 슬라이드할 때 프롬프트 상자를 표시하는 jquery 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다. 1. 마우스를 슬라이드할 때 표시되는 jquery 프롬프트 상자의 예 1. 렌더링 2. 구현 코드(jquery.js, 버튼 이미지, 프롬프트 상자 이미지를 직접 추가해야 함) HTML 코드 코드 복사 코드는 다음과 같습니다. 애니메이션 메뉴 호버 1 <br> $(문서).ready(함수(){<br> $(".menu li").hover(function() {<br> $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");<br> }, 함수() {<br> $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");<br> });<br> });<br> <p><style type="text/css"><br> 몸 {<br> 여백: 10px 자동;<br> 너비: 570px;<br> 글꼴: 75%/120% Arial, Helvetica, sans-serif;<br> }<br> .메뉴 {<br> 여백: 100px 0 0;<br> 패딩: 0;<br> 목록 스타일: 없음;<br> }<br> .menu 리 {<br> 패딩: 0;<br> 여백: 0 2px;<br> 부동: 왼쪽;<br> 위치: 상대;<br> 텍스트 정렬: 중앙;<br> }<br> .메뉴 a {<br> 패딩: 14px 10px;<br> 디스플레이: 블록;<br> 색상: #000000;<br> 너비: 144px;<br> 텍스트 장식: 없음;<br> 글꼴 두께: 굵게;<br> background: url('배경 이미지 1') 반복 없음 center center;<br> }<br> .menu li em {<br> background: url('배경 이미지 2') no-repeat;<br> 너비: 180px;<br> 높이: 45px;<br> 위치: 절대;<br> 상단: -85px;<br> 왼쪽: -15px;<br> 텍스트 정렬: 중앙;<br> 패딩: 20px 12px 10px;<br> 글꼴 스타일: 일반;<br> Z-색인: 2;<br> 표시: 없음;<br> }<br> </스타일><br> </머리><br> <br> <ul class="menu"><br> </p> <li> <br> <a href="http://www.jb51.net">웹 디자이너 월</a> <em>디자인 아이디어, 웹 트렌드, 튜토리얼이 가득한 벽</em><br> </li> <br> <li> <br> <a href="http://www.jb51.net">최고의 웹 갤러리</a><br> <em>최고의 CSS 및 Flash 웹사이트 제공</em><br> </li> <br> <li> <br> <a href="http://www.jb51.net">N.Design Studio</a><br> <em>WDW 디자이너 Nick La</em><br>의 블로그 및 디자인 포트폴리오 </li> <br> <br> </본문><br> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
