|
今天偶然想到一个css样式效果，就是给li标签添加一个背景并变大，感觉好像有一种动画的效果一样，想用在以后的列表中，但是其他浏览器都支持li标签的hover属性，但是IE浏览器都不支持，找了好多种办法，终于找到了一种，就是利用一下代码中的js来让li标签在IE浏览器下支持hover属性。
但是这个问题解决之后，又出现另一个问题，就是IE浏览器不支持margin-top的负值情况，于是我就在样式后面增加了postion:relative，然后就可以了，如果你也遇到了这种情况，就赶快试试以下代码吧！
<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">
.test{width:auto; height:20px; line-height:15px;}
.test ul li{width:10px; height:10px; font-size:0; background:green; list-style:none; float:left; line-height:15px; border-right:1px solid #fff;}
.test ul li:hover{width:20px; height:15px; background:green; line-height:15px; margin-top:-2px; cursor:pointer; position:relative}
</style>
<div class="test" id="nav">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
|