이 기사의 예에서는 jQuery가 행 텍스트 링크 프롬프트의 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 텍스트 줄의 프롬프트 효과 <br> $(함수(){<br> $(".div ul li").hover(function(e){<br> var x=e.pageX;<br> var y=e.pageY;<br> var div=$("<div id='div_show'></div>");<br> var text=$(this).html();<br> $(this).append(div);<br> $("#div_show").html(text).css({"height":"25px","position":"absolute","zIndex":"99","BackgroundColor":"#38F758"," whiteSpace":"nowrap","paddingLeft":"15px","paddingRight":"15px","top":y 10 "px","left":x 10 "px"});<br> $("this").children("#div_show").show();<br> },함수(){<br> $(this).children("#div_show").remove();<br> })<br> })<br> <br> <style type="text/css"><br> ul{ 여백:0;}<br> ul li{ 목록 스타일:없음;}<br> .div{ 너비:200px; 부동:왼쪽; }<br> .div ul li{ 너비: 220px; 줄 높이: 25px; 여백: 1px; 오버플로: 숨김; }<br> </스타일><br> </머리><br> <br> <div class="div"><br> <ul> <br> <li>알겠습니다. 이제 HTML5가 인기가 있으니 제목에 HTML5를 추가하겠습니다</li><br> <li>웹리빌드 교류회에서 Raphael js 라이브러리를 소개했습니다</li> <br> <li>위에서 언급한 CSS의 모습을 간단히 살펴보겠습니다</li><br> </ul> <br> </div><br> </본문><br> </div>