IE6 JS 开发

前端开发中，常常会用到某个元素的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');
});
}
});