ie6使用js支持hover伪类

2016-02-20 00:50 15 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的ie6使用js支持hover伪类,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

css2中规定,:hover伪类可以应用在全部元素上,而ie6只支持a的伪类,因此对于ie6需要使用js,而ie7/ff/op/sa直接定义:hover即可。

JavaScript文件

var WebjxCom = (document.createElement() && document.getElementsByTagName());
window.onload = pinballEffect;
function pinballEffect()
{
    if (!WebjxCom) return;
    var allElements = document.getElementsByTagName('*');
    var originalBackgrounds=new Array();
    for (var i=0; iallElements.length; i++)
    {
        if (allElements[i].className.indexOf('hovereffect') = 0)
        {
            allElements[i].onmouseover = mouseGoesOver;
            allElements[i].onmouseout = mouseGoesOut;
        }
    }
}
function mouseGoesOver()
{
    originalClassNameString = this.className;
    this.className += " lay-on";
}
function mouseGoesOut()
{
    this.className = originalClassNameString;
}
pinballEffect();

下面的代码是html代码,插入到head区内:

!--[if lte IE 6]
script type="text/javascript" language="Javascript" src="hover.js"/script
![endif]--因为IE 7+支持:hover,因此使用条件注释,只针对IE 6-调用该JS文件。

相应的CSS为:

/* 这个是普通样式,定义给需要效果的元素 */
.hovereffect {
border:1px solid blue;
}
/* 这个是hover样式 */
.hovereffect:hover,
.lay-on {
background: #eee;
border:1px solid red;
}

应用:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

div class="hovereffect"div的hover/div
p class="hovereffect"p的hover/p

来源:http://www.tulaoshi.com/n/20160220/1632634.html

延伸阅读
标签: Web开发
在CSS中,模式(pattern)匹配规则决定那种样式规则应用于文档树(document tree)的哪个元素。这些模式叫着选择符(selector)。 一条CSS规则(rule)是选择符{属性:值;属性:值;}(selector {property:value;property1:value2;}),即选择符决定了{}中的声明(declaration)匹配哪个元素。 类:在HTML中当表现class属性的时候,人们可以用点...
标签: Web开发
IE6的某些元素在表现上有多余的一些空白间隙,或者更形象的说是外边距(margin),要么是margin-top,要么是margin-bottom,当然还有margin-left,margin-right。这个在表单元素中特别常见。即使我们的reset css已经将这些元素的margin值设为0。 可以看一个实例:比如们想模拟一个双边框的文本框,如图:   看html代码: 1.spaninp...
标签: 浏览器
还原IE8到IE6的经典界面   现在IE8已经成为越来越多用户的选择,尽管这样,还是有很多用户并不习惯IE8的界面布局,例如在IE8界面中,菜单栏居然位于工具栏的下面。此外,IE8当中的搜索工具条也没有什么必要,因为我们更习惯打开网站搜索。下面,笔者就教大家如何还原IE8的经典界面(如图)。 地址栏,请让位 怎样才能实现...
标签: Web开发
一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) style #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } /style 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支...
标签: Web开发
本人专业是做UI的,写CSS已经有好几年了,目前刚刚在博客发布关于CSS的文章,欢迎有问题的朋友在有问必答论坛提问,我一定尽力解答。 1 针对firefox ie6 ie7的css样式 现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使...

经验教程

93

收藏

44
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部