用js实现IE中的li:hover

本文介绍了一个JavaScript函数,该函数用于根据传入的参数更改不同元素的样式类。具体来说,它会根据输入数字改变ID为'mylist'加相应数字的元素的类名,并调用'reinitIframe'函数进行额外操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

function leftqiehuan(num){
        if(num==1){
            document.getElementById("mylist"+num).className="list0";
            document.getElementById("mylist"+2).className="list1";
            document.getElementById("mylist"+3).className="list1";
            document.getElementById("mylist"+4).className="list1";
        }else if(num==2){
            document.getElementById("mylist"+num).className="list0";
            document.getElementById("mylist"+1).className="list1";
            document.getElementById("mylist"+3).className="list1";
            document.getElementById("mylist"+4).className="list1";
            reinitIframe();
            window.setInterval("reinitIframe()", 200);
        }else if(num==3){
            document.getElementById("mylist"+num).className="list0";
            document.getElementById("mylist"+1).className="list1";
            document.getElementById("mylist"+2).className="list1";
            document.getElementById("mylist"+4).className="list1";
            reinitIframe();
        }else{
            document.getElementById("mylist"+num).className="list0";
            document.getElementById("mylist"+1).className="list1";
            document.getElementById("mylist"+2).className="list1";
            document.getElementById("mylist"+3).className="list1";
            reinitIframe();
        }
    }

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>演示:纯CSS打造的Family tree(族谱)</title> <meta name="keywords" content="css,css3" /> <style type="text/css"> * {margin: 0; padding: 0;} .tree{width:760px; margin:40px auto 0 auto} .tree ul { padding-top: 20px; position: relative; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 5px 0 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*We will use ::before and ::after to draw the connectors*/ .tree li::before, .tree li::after{ content: ''; position: absolute; top: 0; right: 50%; border-top: 1px solid #aadeff; width: 50%; height: 20px; } .tree li::after{ right: auto; left: 50%; border-left: 1px solid#aadeff; } /*We need to remove left-right connectors from elements without any siblings*/ .tree li:only-child::after, .tree li:only-child::before { display: none; } /*Remove space from the top of single children*/ .tree li:only-child{ padding-top: 0;} /*Remove left connector from first child and right connector from last child*/ .tree li:first-child::before, .tree li:last-child::after{ border: 0 none; } /*Adding back the vertical connector to the last nodes*/ .tree li:last-child::before{ border-right: 1px solid #aadeff; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; } .tree li:first-child::after{ border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; } /*Time to add downward connectors from parents*/ .tree ul ul::before{ content: ''; position: absolute; top: 0; left: 50%; border-left: 1px solid #aadeff; width: 0; height: 20px; } .tree li a{ height:60px; background-color: #aadeff; padding: 5px 10px; text-decoration: none; color: #666; font-family: arial, verdana, tahoma; font-size: 11px; display: inline-block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } /*Time for some hover effects*/ /*We will apply the hover effect the the lineage of the element also*/ .tree li a:hover, .tree li a:hover+ul li a { background: #c8e4f8; color: #000; border: 1px solid #94a0b4; } /*Connector styles on hover*/ .tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before{ border-color: #94a0b4; } </style> </head> <body> <div id="main"> <div class="tree"> <ul> <li> <a href="#">Parent</a> <ul> <li> <a href="#">Child</a> <ul> <li><a href="#">Grand Child</a></li> </ul> </li> <li> <a href="#">Child</a> <ul> <li><a href="#">Grand Child</a></li> <li> <a href="#">Grand Child</a> <ul> <li><a href="#">Great Grand Child</a></li> <li><a href="#">Great Grand Child</a></li> <li><a href="#">Great Grand Child</a></li> </ul> </li> <li><a href="#">Grand Child</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html>
最新发布
06-05
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值