javascript解决IE6下hover问题 有时候我们想在非a标签上加hover元素 但是我们都知道IE6下不支持XX:hover,所以我们现在可以用js实现掉:代码如下
- <!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>
- <style>
- #nav li:hover, #nav li.stest {
- font-weight:700;
- color:red;
- }
- </style>
- </head>
- <body>
- <ul id="nav">
- <li>列表一</li>
- <li>列表一</li>
- <li>列表一</li>
- </ul>
- <script type="text/javascript">
- var Hover = function(){
- var listItem = document.getElementById("nav").getElementsByTagName("li");
- for(var i=0;i<listItem.length;i++){
- listItem[i].onmouseover = function(){
- this.className +=" stest";
- }
- listItem[i].onmouseout = function(){
- thisthis.className = this.className.replace(/stest\b/, ""); // \b 查找位于单词的开头或结尾的匹配。
- }
- }
- }
- if(window.attachEvent){
- window.attachEvent('onload',Hover);
- }
- </script>
- </body>
- </html>