1.CSS实现
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 *{margin:0;padding:0;font-size:12px;}
8 body{behavior:url(csshover.htc);}
9 .nav{background-color:#eee;width:600px;height:40px;margin:0 auto;}
10 ul{list-style:none;}
11 ul li{float:left;line-height:40px;text-align:center;position:relative;}
12 a{text-decoration:none;color:#000;padding:0 30px;height:40px;}
13 a:hover{color:#fff;background-color:#ccc;display:block;}
14 ul li ul li{float:none;background-color:#eee;margin-top:2px;}
15 ul li ul{position:absolute;left:0px;top:40px;display:none;}
16 ul li ul a:hover{background-color:blue;}
17 ul li:hover ul{display:block;}
18 </style>
19 </head>
20 <body>
21 <div class="nav">
22 <ul>
23 <li><a href="">这是首页</a>
24 <ul>
25 <li><a href="">PHP</a></li>
26 <li><a href="">Javascript</a></li>
27 <li><a href="">jQuery</a></li>
28 </ul>
29 </li>
30 <li><a href="">课程大厅</a></li>
31 <li><a href="">学习中心</a>
32 <ul>
33 <li><a href="">PHP</a></li>
34 <li><a href="">Javascript</a></li>
35 <li><a href="">jQuery</a></li>
36 </ul>
37 </li>
38 <li><a href="">经典案例</a></li>
39 <li><a href="">关于我们</a></li>
40 </ul>
41 </div>
42 </body>
43 </html>
特点：代码简洁明了。如需实际运用，建议把css文件单独分离，下面来加强一下ie的兼容性
复制以下代码，改名为 csshover.htc 放入文件目录
1 <attach event="ondocumentready" handler="parseStylesheets"/>
2 <script language="JScript">
3 var currentSheet, doc = window.document, activators = {
4 onhover:{on:‘onmouseover‘, off:‘onmouseout‘},
5 onactive:{on:‘onmousedown‘, off:‘onmouseup‘}
6 };
7 function parseStylesheets(){
8 var sheets = doc.styleSheets, l = sheets.length;
9 for(var i = 0; i < l; i++){
10 parseStylesheet(sheets[i]);
11 };
12 };
13 function parseStylesheet(sheet){
14 if(sheet.imports){
15 try{
16 var imports = sheet.imports, l = imports.length;
17 for(var i = 0; i < l; i++){
18 parseStylesheet(sheet.imports[i]);
19 };
20 }catch(securityException){};
21 };
22 try{
23 var rules = (currentSheet = sheet).rules, l = rules.length;
24 for(var j = 0; j < l; j++){
25 parseCSSRule(rules[j]);
26 };
27 }catch(securityException){};
28 };
29 function parseCSSRule(rule){
30 var select = rule.selectorText, style = rule.style.cssText;
31 if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
32 var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, ‘on$1‘);
33 var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, ‘.$2‘ + pseudo);
34 var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
35 var affected = select.replace(/:hover.*$/, ‘‘);
36 var elements = getElementsBySelect(affected);
37 currentSheet.addRule(newSelect, style);
38 for(var i = 0; i < elements.length; i++){
39 new HoverElement(elements[i], className, activators[pseudo]);
40 };
41 };
42 function HoverElement(node, className, events){
43 if(!node.hovers) node.hovers = {};
44 if(node.hovers[className]) return;
45 node.hovers[className] = true;
46 node.attachEvent(events.on, function(){
47 node.className += ‘ ‘ + className;
48 });
49 node.attachEvent(events.off, function(){
50 node.className = node.className.replace(new RegExp(‘\\s+‘+className, ‘g‘),‘‘);
51 });
52 };
53 function getElementsBySelect(rule){
54 var parts, nodes = [doc];
55 parts = rule.split(‘ ‘);
56 for(var i = 0; i < parts.length; i++){
57 nodes = getSelectedNodes(parts[i], nodes);
58 };
59 return nodes;
60 };
61 function getSelectedNodes(select, elements){
62 var result, node, nodes = [];
63 var classname = (/\.([a-z0-9_-]+)/i).exec(select);
64 var identify = (/\#([a-z0-9_-]+)/i).exec(select);
65 var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, ‘‘);
66 for(var i = 0; i < elements.length; i++){
67 result = tagName ? elements[i].all.tags(tagName) : elements[i].all;
68 for(var j = 0; j < result.length; j++){
69 node = result[j];
70 if((identify && node.id != identify[1]) || (classname && !(new RegExp(‘\\b‘ + classname[1] + ‘\\b‘).exec(node.className)))) continue;
71 nodes[nodes.length] = node;
72 };
73 };
74 return nodes;
75 };
76 </script>
具体实现原理自行百度。
2.Jquery实现
使用的jQuery版本为1.7.2.min.js,可以去各大CDN平台找到。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 *{margin:0;padding:0;font-size:12px;}/*加强兼容，去除内边间距兼容*/
8 .nav{background-color:#eee;width:600px;height:40px;margin:0 auto;}/*div class="nav"背景上色，制定宽高并居中*/
9 ul{list-style:none;}/*去除小圆点*/
10 ul li{float:left;line-height:40px;text-align:center;position:relative;width:108px;}
11 a{text-decoration:none;color:#000;padding:0 30px;height:40px;}
12 a:hover{color:#fff;background-color:#ccc;display:block;}
13 ul li ul li{float:none;background-color:#eee;margin-top:2px;}
14 ul li ul{position:absolute;left:0px;top:40px;display:none;}
15 ul li ul a:hover{background-color:blue;}
16 ul li ul li ul{position:absolute;left:108px;top:0px;display:none;}
17 /* ul li:hover ul{display:block;}*/
18 </style>
19 <script type="text/javascript" src="jquery.min.js"></script>
20 <script type="text/javascript">
21 $(document).ready(function(){
22 $(".navmenu").mouseover(function(){
23 $(this).children("ul").show();
24 });
25 $(".navmenu").mouseout(function(){
26 $(this).children("ul").hide();
27 });
28 });
29
30 </script>
31 </head>
32 <body>
33 <div class="nav">
34 <ul>
35 <li class="navmenu"><a href="">这是首页</a>
36 <ul>
37 <li><a href="">PHP</a></li>
38 <li><a href="">Javascript</a></li>
39 <li class="navmenu"><a href="">jQuery</a>
40 <ul>
41 <li><a href="">PHP</a></li>
42 <li><a href="">Javascript</a></li>
43 <li><a href="">jQuery</a></li>
44 </ul>
45 </li>
46 </ul>
47 </li>
48 <li><a href="">课程大厅</a></li>
49 <li class="navmenu"><a href="">学习中心</a>
50 <ul>
51 <li><a href="">PHP</a></li>
52 <li><a href="">Javascript</a></li>
53 <li><a href="">jQuery</a></li>
54 </ul>
55 </li>
56 <li><a href="">经典案例</a></li>
57 <li><a href="">关于我们</a></li>
58 </ul>
59 </div>
60 </body>
61 </html>
3.js实现
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <style type="text/css">
7 *{margin:0;padding:0;font-size:12px;}
8 .nav{background-color:#eee;width:600px;height:40px;margin:0 auto;}
9 ul{list-style:none;}
10 ul li{float:left;line-height:40px;text-align:center;position:relative;}
11 a{text-decoration:none;color:#000;padding:0 30px;height:40px;}
12 a:hover{color:#fff;background-color:#ccc;display:block;}
13 ul li ul li{float:none;background-color:#eee;margin-top:2px;}
14 ul li ul{position:absolute;left:0px;top:40px;display:none;}
15 /*ul li ul a:hover{background-color:blue;}*/
16 /*ul li:hover ul{display:block;}*/
17 </style>
18 <script type="text/javascript">
19 function showsubmenu(li){
20 var submenu=li.getElementsByTagName("ul")[0];
21 submenu.style.display="block";
22 }
23 function hidesubmenu(li){
24 var submenu=li.getElementsByTagName("ul")[0];
25 submenu.style.display="none";
26 }
27 </script>
28 </head>
29 <body>
30 <div class="nav">
31 <ul>
32 <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="">这是首页</a>
33 <ul>
34 <li><a href="">PHP</a></li>
35 <li><a href="">Javascript</a></li>
36 <li><a href="">jQuery</a></li>
37 </ul>
38 </li>
39 <li><a href="">课程大厅</a></li>
40 <li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="">学习中心</a>
41 <ul>
42 <li><a href="">PHP</a></li>
43 <li><a href="">Javascript</a></li>
44 <li><a href="">jQuery</a></li>
45 </ul>
46 </li>
47 <li><a href="">经典案例</a></li>
48 <li><a href="">关于我们</a></li>
49 </ul>
50 </div>
51 </body>
52 </html>
特点：直接对属性值操作，代码比较简练。
如有纰漏，希望指出
时间： 2024-08-27 13:56:54