javascript解决IE6下hover问题的方法_javascript技巧

有时候我们想在非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
ie6 hover无效、ie6 hover、javascript hover、javascript hover事件、ie6 javascript,以便于您获取更多的相关知识。

时间: 2024-08-30 17:46:30

javascript解决IE6下hover问题的方法_javascript技巧的相关文章

JS解决ie6下png透明的方法实例

解决ie6下png透明的问题想必前端都比较清楚,虽然有很多方法,但是我觉得用JS还是最省事的方法,不管是图片还是背景图片都OK.   复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <title>解决ie6下png透明方法之JS法-</title> <style type="text/css">  .a{background: #FFFF99

JS解决ie6下png透明的方法实例_javascript技巧

复制代码 代码如下: <!DOCTYPE html><html lang="en"><head><title>解决ie6下png透明方法之JS法-</title><style type="text/css"> .a{background: #FFFF99 ;  background-image: url(bg.jpg); height:800px;padding: 50px;  } .b{ fl

JavaScript实现将数组数据添加到Select下拉框的方法_javascript技巧

本文实例讲述了JavaScript实现将数组数据添加到Select下拉框的方法.分享给大家供大家参考.具体如下: 这里演示将数组中的数据添加到Select下拉菜单中的效果,当你点击下拉框的时候,就动态加载了数据,更换Select内容的时候,直接替换数组中的内容就可以了.适合前端设计者实现前台的部分本地化脚本操作. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-array-add-select-data-codes/ 具体代码如下: <!D

javascript实现多级联动下拉菜单的方法_javascript技巧

本文实例讲述了javascript实现多级联动下拉菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var arrItems1 = new Array(); var arrItemsGrp1 = new Array(); arrItems1[3] = "列二"; arrItemsGrp1[3] = 1; arrItems1[4] = &qu

javascript基于DOM实现省市级联下拉框的方法_javascript技巧

本文实例讲述了javascript基于DOM实现省市级联下拉框的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>省市级联下拉框</title

JavaScript模拟重力状态下抛物运动的方法_javascript技巧

本文实例讲述了JavaScript模拟重力状态下抛物运动的方法.分享给大家供大家参考.具体分析如下: 这段JavaScript代码模拟重力状态下的抛物运动,可设置以下参数:横向初速度.纵向初速度.重力加速度(如果这个加速度是一个随时间变化的值,就能达到其他非匀加速运动的效果了).动画间隔时间等,相对专业 <!doctype html> <html> <head> <title>js抛物运动</title> <meta charset=&qu

javascript中对变量类型的判断方法_javascript技巧

在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String:复杂数据类型是Object,Object中还细分了很多具体的类型,比如:Array, Function, Date等等.今天我们就来探讨一下,使用什么方法判断一个出一个变量的类型. 在讲解各种方法之前,我们首先定义出几个测试变量,看看后面的方法究竟能把变量的类型解析成什么样子,以下几个变量差不多包含了我们在实际编码中常用的类型. var

js解决select下拉选不中问题_javascript技巧

当事件mouseover中出现select下拉框时,select下拉是选不中的,解决办法: var o = e.relatedTarget || e.toElement;//判断下移动到的对象,移动到option上ie下是null,firefox等为undefined.. if (!o) return;//为option退出不隐藏 完整代码案例为: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu

JavaScript动态检验密码强度的实现方法_javascript技巧

平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时,会有一个类似于进度条的长条进行提示用户输入的密码强度.如下图: 我看到有些人用几张不同的图片来替换,这样似乎可以,但是不太好.所以我通过其他方式实现. 实质上这是根据用户输入的不同密码强度来改变 颜色区域的长度. 密码强度这个横条实质是一个div,其他标记也可以,div里面有一个span标记,我就是通过改变span的长度和颜色来表现密码的强度的.原理很简单,但是在操作过程中,可能会遇到一些问题很头疼. 1.先在html页面里面