집 >웹 프론트엔드 >JS 튜토리얼 >마우스가 over_jquery를 통과할 때 숨겨진 레이어 텍스트 링크를 구현하는 jQuery 메서드

마우스가 over_jquery를 통과할 때 숨겨진 레이어 텍스트 링크를 구현하는 jQuery 메서드

WBOY원래의: 2016-05-16 15:37:031264검색

이 기사의 예에서는 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 프로그래밍에 도움이 되기를 바랍니다.

성명：

이전 기사：JavaScript_javascript 기술로 구현된 플로팅 레이어 프레임워크의 사용 사례 분석다음 기사：JavaScript_javascript 기술로 구현된 플로팅 레이어 프레임워크의 사용 사례 분석

마우스가 over_jquery를 통과할 때 숨겨진 레이어 텍스트 링크를 구현하는 jQuery 메서드

관련 기사