jquery는 탐색 메뉴 마우스 프롬프트 기능을 구현합니다.-JS 튜토리얼-php.cn

jquery는 탐색 메뉴 마우스 프롬프트 기능을 구현합니다.

php中世界最好的语言

풀어 주다： 2018-04-25 10:55:28

원래의

1696명이 탐색했습니다.

이번에는 탐색 메뉴의 마우스 프롬프트 기능을 구현하기 위한 jquery를 가져오겠습니다. 탐색 메뉴의 마우스 프롬프트 기능을 구현하기 위한 jquery용 notes는 무엇입니까? 다음은 실제 사례입니다.

이것은 일반적으로 "링크 프롬프트"로 알려진 멋진 탐색 메뉴 마우스 프롬프트 효과입니다. 탐색 메뉴의 링크 위에 마우스를 놓으면 링크가 가리키는 웹 페이지의 대략적인 내용이 표시되어 사용자에게 도달하라는 메시지를 표시합니다. 원하는 페이지.

먼저 실행 중인 효과의 스크린샷을 살펴보겠습니다.

구체적인 코드는 다음과 같습니다.

<!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>链接提示特效</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $(".menu a").hover(function() {
  $(this).next("em").animate({opacity: "show", top: "-75"}, "slow");
 }, function() {
  $(this).next("em").animate({opacity: "hide", top: "-85"}, "fast");
 });
});
</script>
<style type="text/css"> 
body {
 margin: 10px auto;
 width: 570px;
 font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
 margin: 100px 0 0;
 padding: 0;
 list-style: none;
}
.menu li {
 padding: 0;
 margin: 0 2px;
 float: left;
 position: relative;
 text-align: center;
}
.menu a {
 padding: 14px 10px;
 display: block;
 color: #000000;
 width: 144px;
 text-decoration: none;
 font-weight: bold;
 background: url(images/button.gif) no-repeat center center;
}
.menu li em {
 background: url(images/hover.png) no-repeat;
 width: 180px;
 height: 45px;
 position: absolute;
 top: -85px;
 left: -15px;
 text-align: center;
 padding: 20px 12px 10px;
 font-style: normal;
 z-index: 2;
 display: none;
}
</style>
</head>
<body>
<ul class="menu">
 <li>
  <a href="http://www.baidu.com">Web Designer Wall</a>  
  <em>A wall of design ideas, web trends, and tutorials</em>
 </li>
 <li>
  <a href="#">Best Web Gallery</a>
  <em>Featuring the best CSS and Flash web sites</em>
 </li>
 <li>
  <a href="#">N.Design Studio</a>
  <em>Blog and design portfolio of WDW designer, Nick La</em>
 </li>
</ul>
</body>
</html>