1. 효과는 사진과 같습니다 2. 구현 아이디어 1 제목(여기에 태그가 있음)으로 마우스를 이동하세요. 마우스 위치의 텍스트 내용이 포함된 div를 만듭니다. 생성된 div를 문서에 추가하세요 프롬프트 레이어의 위치 설정 2 제목 밖으로 마우스를 이동하세요 div 제거 3 제목 내에서 마우스가 움직일 때 div 효과 추가와 동일 3.JQuery 구현 코드 코드 복사 코드는 다음과 같습니다. < ;!DOCTYPE html> <제목> <br>본문 <br>{ <br>글꼴 크기: 12px; <br>} <br>a <br>{ <br>텍스트 장식:없음 <br>} <br>a:hover <br>{ <br>color:#CC0000 <br>} 🎜># 메인 <br>{ <br>여백:100px 자동; <br>높이:150px; <br>border:solid #aaa 1px; <br> 배경색:#aaa; <br>} <br> <br>$(function(){ <br>$("tr:even").addClass("tr_color "); <br>$("#tb a").mouseover(function(e){ <br>var toolTip = "<div id='tooltip' width='100px' height='12px' style=' 위치:절대 ;경계:고체 #aaa 1px;배경 색상:#F9F9F9'>" $(this).html() "</div>"; <br>$("body").append(toolTip ); <br>$("#tooltip").css({ <br>"top" :e.pageY "px", <br>"left" :e.pageX "px" <br>}) <br>$ ("#tb a").mouseout(function(){ <br>$("#tooltip").remove(); <br>}) <br>$("#tb a"). mousemove(function (e){ <br>$("#tooltip").css({ <br>"top" :(e.pageY 5) "px", <br>"left" :(e.pageX 2 ) "px " <br>}); <br>//alert("Y:" e.pageY "X:" <br>}); ; <br> JQuery--마우스 팔로우 프롬프트 ;table id="tb" width="100%"> 추석 잘 보내세요 ;/td> 중추절 12 ; 행복한 중추절 21 즐거운 추석 22 중추절 41 즐거운 추석 51 < a href="#">행복한 추석 52 행복한 중추절 61 ;행복한 추석 62
