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 19 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
关于JavaScript的一些看法
2009/05/27 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
python比较两个列表是否相等的方法
2015/07/28 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python路径的写法及目录的获取方式
2019/12/26 Python
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
校园招聘策划书
2014/01/09 职场文书
八一建军节感言
2014/02/28 职场文书
朋友离别感言
2015/08/04 职场文书
远程教育学习心得体会
2016/01/23 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技