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>

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

赞 (0)

相关推荐

  • js hover 定时器(实例代码)

    js hover 定时器(实例代码)

    复制代码 代码如下: $("#showComp tr:not('.stlisttitle')").hover(function(){        try{if($("#calendarPanel").is(":visible")) $(".playerlist").hide();else{clearTimeout(timMess);        $(".playerlist").css("to

  • JS组件Bootstrap dropdown组件扩展hover事件

    JS组件Bootstrap dropdown组件扩展hover事件

    bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看 下面是完整的js插件代码

  • JavaScript实现为input与textarea自定义hover,focus效果的方法

    JavaScript实现为input与textarea自定义hover,focus效果的方法

    本文实例讲述了JavaScript实现为input与textarea自定义hover,focus效果的方法.分享给大家供大家参考.具体如下: 这里演示JavaScript为input输入框和textarea文本框自定义hover,focus效果,hover也就是鼠标放上去之后的效果,focus是鼠标焦点问题,要实现 这种效果,需要JS来配合,这个例子就是很不错的,它把网页上输入框和文本框都加入了鼠标悬停和鼠标焦点效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.n

  • 基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

    基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示: hover时显示二维码 二.实现 用如下这样一个简单的效果:鼠标hover到A上显示B来模拟 有2种实现方式,推荐第二种,第一种有弊端下面会说. 1.方法一 原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B.这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏. 代码: <!DOCTYPE ht

  • 使用js操作css实现js改变背景图片示例

    1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: ar imgArr=["http://www.jb51.net/logo_cn.png","http://www.jb51.net/baidu_sylogo1.gif","http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.jb51.net/news/

  • js模仿hover的具体实现代码

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="description" content="this" /> <meta name="keywords" content="this" /> <title>this</

  • 详解Javascript动态操作CSS

    一.使用js操作css属性的写法 1.对于没有中划线的css属性一般直接使用style.属性名即可. 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position 2.对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可. 如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamil

  • jQuery控制图片的hover效果（smartRollover.js）

    用js实现的好处是:如果一个网站中图片的hover效果比较多,可能每一个都要有css控制,那样代码有的冗余.但是有了js控制,不管有多少图片,hover效果都可以用同样的js,但是必须保证图片的out/off效果和over/on效果命名有规律性,比如: navi01_out.jpg/navi01_off.jpg navi01_over.jpg/nvai02_on.jpg 这样js控制起来非常方便.找到匹配的名称,hover时替换成另一个名称. 今天我想用jQuery控制一下效果: 代码如下: 复

  • js操作css属性实现div层展开关闭效果的方法

    本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. <title>js操作div展开关闭</title> <style> #jb51 { border: solid 1px #EEE; background:#F7F7F7; ma

  • JS操作CSS随机改变网页背景实现思路

    今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", "http://www.baidu.com/img/baidu_sylogo1.gif", "http://www

  • JS实现css hover操作的方法示例

    JS实现css hover操作的方法示例

    本文实例讲述了JS实现css hover操作的方法.分享给大家供大家参考,具体如下: hover我们可以用css的方式写,当然,也可以用js的方式写 <html> <head> <title>js的下拉菜单效果</title> <style type="text/css"> *{ padding:0px; margin:0px; } ul li{ list-style: none; } a{ text-decoration:

随机推荐