javascript解决IE6下hover问题的方法

2019-11-20 11:58:52

字体：大中小

来源：转载

供稿：网友

有时候我们想在非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>

以上内容就是告诉大家javascript解决IE6下hover问题的方法，希望对大家的学习有所帮助。

上一篇：详解JavaScript ES6中的模板字符串

下一篇：JavaScript如何自定义trim方法