我的css滤镜为什么不运行

<html>
<style>

body{
text-align:center;
}

#nav{
width:900px;

}
#nav ul{
margin:0px;
padding:0px;
line-height:40px;
}
#nav li{
float:left;
margin-left:5px;
}
#nav a{
padding-left;10px;
padding-right:10px;
border:1px solid #ccc;
font-size:12px;
filter:blendtrans(duration=1);
background-color:black;
text-decoration:none;
display:block;
color:white;
}

</style>
<script language="javascript">
function init(pdiv)
{
var ul=pdiv.getElementsByTagName("ul")[0];
var lis=ul.getElementsByTagName("li");
for (var i=0;i<lis.length;i++){
var a=lis[i].getElementsByTagName("a")[0];
a.onmouseover=function (){
this.filters[0].apply();
this.style.backgroundColor="green";
this.filters[0].play();
}
a.onmouseout=function(){
this.filters[0].apply();
this.style.backgroundColor="black";
this.filters[0].play();
}
}
}
</script><body>

<div id="nav">
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
</ul>
</div>

</body>
<div id="nav">
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接1</a></li>
</ul>
</div>
<script>
init(nav);
</script>
</html>

解决方案 »

  1.   

    <html> 
    <style> body{ 
    text-align:center; 
    } #nav{ 
    width:900px; } 
    #nav ul{ 
    margin:0px; 
    padding:0px; 
    line-height:40px; 
    } 
    #nav li{ 
    float:left; 
    margin-left:5px; 
    } 
    #nav a{ 
    padding-left;10px; 
    padding-right:10px; 
    border:1px solid #ccc; 
    font-size:12px; 
    filter:blendtrans(duration=1); 
    background-color:black; 
    text-decoration:none; 
    display:block; 
    color:white; 
    } </style> 
    <script language="javascript"> 
    function init(pdiv) 
    { 
    //var ul=pdiv.getElementsByTagName("ul")[0]; 
    var ul= pdiv.childNodes[0];var lis=ul.getElementsByTagName("li"); 
    for (var i=0;i <lis.length;i++){ 
    var a=lis[i].getElementsByTagName("a")[0]; 
    a.onmouseover=function (){ 
    this.filters[0].apply(); 
    this.style.backgroundColor="green"; 
    this.filters[0].play(); 
    } 
    a.onmouseout=function(){ 
    this.filters[0].apply(); 
    this.style.backgroundColor="black"; 
    this.filters[0].play(); 
    } 
    } 
    } 
    </script> <body> <div id="nav"> 
    <ul> 
    <li> <a href="#">链接1 </a> </li> 
    <li> <a href="#">链接1 </a> </li> 
    <li> <a href="#">链接1 </a> </li> 
    <li> <a href="#">链接1 </a> </li> 
    </ul>
    <ul> 
    <li> <a href="#">链接1 </a> </li> 
    <li> <a href="#">链接1 </a> </li> 
    <li> <a href="#">链接1 </a> </li> 
    <li> <a href="#">链接1 </a> </li> 
    </ul> 
    </div> 
    </body> 
    <script> 
    init(nav); 
    </script> 
    </html>
    是这样子吗？