javascript解决IE6下hover问题的方法


Posted in Javascript onJuly 28, 2015

有时候我们想在非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 相关文章推荐
javascript动态加载三
Aug 22 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
Jun 06 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 Javascript
JavaScript如何自定义trim方法
Jul 28 #Javascript
详解JavaScript ES6中的Generator
Jul 28 #Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 #Javascript
JavaScript调用客户端Java程序的方法
Jul 27 #Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 #Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 #Javascript
javascript实现类似java中getClass()得到对象类名的方法
Jul 27 #Javascript
You might like
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
详解php中 === 的使用
2016/10/24 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
EasyUI布局 高度自适应
2016/06/04 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
js继承实现方法详解
2016/12/16 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
Python实时获取cmd的输出
2015/12/13 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
django query模块
2019/04/20 Python
Django之使用内置函数和celery发邮件的方法示例
2019/09/16 Python
python常用数据重复项处理方法
2019/11/22 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
python中reload重载实例用法
2020/12/15 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
小学教师听课制度
2014/02/01 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
少年雷锋观后感
2015/06/10 职场文书
《迟到》教学反思
2016/02/24 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP