解决IE7以下版本不支持无A状态伪类的几种方法

在IE7以下版本一直是不支持无A状态伪类的,通常都要靠Javascript来解决的,最近经常有人问起此类问题,故整理了几种方法,脚本来自国外网站,供大家参考。
方法一

javascript文件,来自Htmldog .


代码如下:

function suckerfish(type, tag, parentId) {
    if (window.attachEvent) {
        window.attachEvent("onload", function() {
            var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
            type(sfEls);
        });
    }
}

sfHover = function(sfEls) {
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}

sfFocus = function(sfEls) {
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onfocus=function() {
            this.className+=" sffocus";
        }
        sfEls[i].onblur=function() {
            this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
        }
    }
}

suckerfish(sfHover, "INPUT");
suckerfish(sfFocus, "INPUT");
suckerfish(sfHover, "p");

脚本可改动的部分

//这里写入你需要效果的标签 
   suckerfish(sfHover, "INPUT"); 
   suckerfish(sfFocus, "INPUT"); 
   suckerfish(sfHover, "p");

CSS

input:focus,input.sffocus { 
    background: #F8F8F8; 
    color: #333333; 
    border: 1px solid red; 
    } 
   input:hover,input.sfhover{ 
   background: #EEE; 
   color: #369; 
   border: 1px solid #069; 
   } 
  p:hover,p.sfhover{ 
  background: #EEE; 
  color: #333; 
   border: 1px solid #069; 
   } 
   p:hover,p.sfhover{ 
   background: #EEE; 
  color: #333; 
   }

上面代码中第一个类是给支持CSS2的浏览器,第二个是给IE6及以下版本的。需注意的是,你给某标签设定了,那么整个页面内的这个标签都会沿用同一个样式。
方法二

javascript文件.


代码如下:

var W3CDOM = (document.createElement && document.getElementsByTagName);
//window.onload = pinballEffect;

function pinballEffect()
{
    if (!W3CDOM) return;
    var allElements = document.getElementsByTagName('*');
    var originalBackgrounds=new Array();
    for (var i=0; i<allElements.length; i++)
    {
        if (allElements[i].className.indexOf('hovereffect') !=-1)
        {
            allElements[i].onmouseover = mouseGoesOver;
            allElements[i].onmouseout = mouseGoesOut;
        }
    }
}

function mouseGoesOver()
{
    originalClassNameString = this.className;
    this.className += " lay-on";
}

function mouseGoesOut()
{
    this.className = originalClassNameString;
}
pinballEffect();

脚本可改动的部分

1. if (allElements[i].className.indexOf('hovereffect') !=-1)

CSS

1. .hovereffect{
   2. Background: #CCC;
   3. }

在需要应用效果的地方用class="hovereffect"调用。这种方法比较灵活。
方法三

使用网上常见的onmouseover、onmouseout这类东西,行为和结构不分离,不推荐使用。

(0)

相关推荐

  • 解决IE7以下版本不支持无A状态伪类的几种方法

    在IE7以下版本一直是不支持无A状态伪类的,通常都要靠Javascript来解决的,最近经常有人问起此类问题,故整理了几种方法,脚本来自国外网站,供大家参考. 方法一 javascript文件,来自Htmldog . 复制代码 代码如下: function suckerfish(type, tag, parentId) {     if (window.attachEvent) {         window.attachEvent("onload", function() {   

  • 完美解决IE低版本不支持call与apply的问题

    Function.prototype的apply和call是在1999年发布的ECMA262 Edition3中才加入的(1998年发布ECMA262 Edition2).在此前的的浏览器如IE5.01(JScript 5.0)中是没有apply和call的.因此会带来一些兼容性问题,以下是修复方式: 复制代码 代码如下: if(!Function.prototype.apply){     Function.prototype.apply = function(obj, args){     

  • js无提示关闭浏览器窗口的两种方法分析

    1,使用js: 用多种方式打开一个页面,然后用 window.close() 关闭它,在各浏览器下表现有所不同.如在地址栏中直接输入URL 时,Firefox Chrome Safari 下调用 window.close() 关闭页面无效.再如 Ctrl + 点击链接打开的窗口,Firefox 下无法通过调用 window.close() 来关闭. firefox下无法关闭可能原因: 不是JS代码window.close()的问题,而是Firefox的配置问题,解决方法如下: 在Firefox地

  • 让PHP支持页面回退的两种方法

    在开发过程中,往往因为表单出错而返回页面的时候填写的信息都不见了,为了支持页面回跳,可以通过两种方法实现. 第一,使用Header方法设置消息头Cache-control header('Cache-control: private, must-revalidate');  //支持页面回跳 第二,使用session_cache_limiter方法 //注意要写在session_start方法之前  session_cache_limiter('private, must-revalidate'

  • 让PHP支持页面回退的两种方法[转]

    在开发过程中,往往因为表单出错而返回页面的时候填写的信息都不见了,为了支持页面回跳,可以通过两种方法实现. 第一,使用Header方法设置消息头Cache-control header('Cache-control: private, must-revalidate');  //支持页面回跳 第二,使用session_cache_limiter方法 //注意要写在session_start方法之前  session_cache_limiter('private, must-revalidate'

  • 解决IE7中使用jQuery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就不能调试,就不能知道改了后还会不会有这样的问题. 想想可能与客户环境唯一不同就只有可能是js缓存问题了,然后把所有的js文件引用的地方都加上一个当前时间参数,然问题依然存在. 本来规定的版本就是IE8,所以也没有想过会有版本兼容问题,在说了咱用的是jquery,jqeruy的出现不就是号称为了解决浏

  • 解决Mac下首次安装pycharm无project interpreter的问题

    Pycharm本身并不带编译器,所以第一次用需要自己下载编译器插件. 1.首先去 https://www.python.org/downloads/ 这个网址去下载对应的python版本 (windows用户也是去这个网址下载): 2.下载安装好后打开pycharm: 3.点击菜单栏pycharm->Preferences 4.在搜索栏里搜索interpreter,点击project interpreter,然后找到一个"齿轮"的符号,选择add : 5.点击第一项(Virtua

  • vue 解决IOS10低版本白屏的问题

    新公司是做自己的独立产品,比之前呆过的外包公司要求严格的多,注重用户体验,以下是在新项目里进行前端优化的一些操作 一,低版本空白屏问题,以及ios8的样式问题 本项目是通过vue-cli搭建,上线以后运行在新版本的苹果手机和安卓手机上均无问题.但是在ios8 9上出现了空白屏的原理,经过测试以后发现是低版本不兼容es6的语法,经过几番尝试找到了最优解. 1 空白屏问题 首先安装babel-polyfill,安装命令:npm install --save-dev babel-polyfill 安装

  • win2008 iis7/iis7.5下最简单最强安装多版本PHP支持环境

    利用PHP Manager,windows 2008 R2 IIS7.5安装多版本PHP环境 个人对在windows 2008 R2上,在iis环境中配置安装php环境实践中的注意点: 1.如需要在服务器上配置mysql的话,在配置php环境前先安装mysql.(根据自己的需求,下载相应的mysql版本) mysql安装配置步骤请查看:http://www.jb51.net/article/39188.htm sqlserver 2008安装:http://www.jb51.net/articl

  • Android 中解决Viewpage调用notifyDataSetChanged()时界面无刷新的问题

    Android 中解决Viewpage调用notifyDataSetChanged()时界面无刷新的问题 问题描述 相信很多做过Viewpager的人肯定遇到过这个问题,这个是bug还是Android就是如此设计的,我们不做讨论.总之,它确实影响我们功能的实现了. 可能不少同学选择为Viewpager重新设置一遍适配器adapter,达到刷新的目的.但是这种方法在大多数情况下,是有问题的. 解决办法 以我们可以尝试着修改适配器的写法,覆盖getItemPosition()方法,当调用notify

随机推荐