IE6 JS 开发

最新推荐文章于 2017-10-26 15:22:50 发布

weixin_34367257

最新推荐文章于 2017-10-26 15:22:50 发布

阅读量101

点赞数

文章标签： python 前端 javascript ViewUI

原文链接：https://my.oschina.net/iatbforever/blog/272883

版权

2019独角兽企业重金招聘Python工程师标准>>>

前端开发中，常常会用到某个元素的hover伪类来实现鼠标滑过某元素时该元素展现某些效果，以丰富展现形式，同时也很好的提高用户体验，主流的浏览器都支持基本所有元素的hover伪类，

但是ie6就只支持a标签的hover伪类，这里介绍一种解决ie6常用的一种方式:

<script type="text/javascript">
    <!--//--><![CDATA[//><!--
        sfHover = function() {
        	if (!document.getElementsByTagName) return false;
        	var sfEls = document.getElementById("menu").getElementsByTagName("li");
        	for (var i=0; i<sfEls.length; i++) {
        		sfEls[i].onmouseover=function() {
        			this.className+=" sfhover";
        		}
        	}	
        	var sfEls = document.getElementById("topnav").getElementsByTagName("li");
        	for (var i=0; i<sfEls.length; i++) {
        		sfEls[i].onmouseover=function() {
        			this.className+=" sfhover";
        		}
        	}
        }
        if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]>
</script>

上面的代码让id为menu和topnav的两个元素在鼠标滑过该元素时，给子元素（这里是li）添加了sfHover样式。

jQuery可以更容易、更简洁的实现，代码如下：

jQuery(function ($) {
    if ( jQuery.browser.msie && ( jQuery.browser.version == "6.0" ) && !jQuery.support.style ){
    	jQuery('需要加hover的元素').hover(function(){
    	    jQuery(this).addClass('hover');
    	},function(){
    	    jQuery(this).removeClass('hover');
    	});
    }
});

转载于:https://my.oschina.net/iatbforever/blog/272883