您的位置：首页 > 其它

IE6下支持li：hover的鼠标滑过效果，方法绝对正确，我已测试过

2012-06-27 09:21 465 查看

<!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>IE的hover效果实现</title>

<script language="javascript">

stuHover = function() {

var cssRule;

var newSelector;

for (var i = 0; i < document.styleSheets.length; i++)

for (var x = 0; x < document.styleSheets[i].rules.length ; x++)

{

cssRule = document.styleSheets[i].rules[x];

if (cssRule.selectorText.indexOf("LI:hover") != -1)

{

newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");

document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);

}

}

var getElm = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<getElm.length; i++) {

getElm[i].onmouseover=function() {

this.className+=" iehover";

}

getElm[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" iehover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", stuHover);

</script>

<style type="text/css">

li:hover { background:#00CC00; display:block; }

</style>

</head><body >

<div id="nav">

<ul><li>让IE6支持li:hover的JS代码</li></ul>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航