이 기사의 예에서는 jQuery가 마우스를 지나갈 때 나타나는 숨겨진 레이어 텍스트 링크를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
다음은 숨겨진 레이어를 표시하는 Jquery 방법을 보여줍니다. 마우스가 그 위로 지나갈 때 텍스트 링크가 나타나 점수 효과를 시뮬레이션합니다. 여기에 추가된 작업은 없으며 전경 효과의 구현만 표시됩니다.
런닝 효과 스크린샷은 다음과 같습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/
구체적인 코드는 다음과 같습니다.
<!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>JQ显示隐藏层,鼠标经过时出现文字链接</title> <style>.list span{display:none}</style> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function(){ $(".list li").hover(function(){ $(this).find("span").show(); },function(){ $(this).find("span").hide(); }); }); </script> </head> <body> <ul class="list"> <li><a href="#">文字链接</a> <em>显示</em> <span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li> <li><a href="#">文字链接</a> <em>显示</em> <span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li> <li><a href="#">文字链接</a> <em>显示</em> <span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li> <li><a href="#">文字链接</a> <em>显示</em> <span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li> <li><a href="#">文字链接</a> <em>显示</em> <span><a href="#">好评</a> <a href="#">中评</a> <a href="#">差评</a></span></li> </ul> </body> </html>
이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.