JavaScript--鼠标的移入移开来隐藏ul

来源：互联网发布：mac win系统截图快捷键编辑：程序博客网时间：2024/06/05 07:38

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        ul{            margin: 0;            padding: 0;        }        li{            list-style: none;        }        #box{            width: 200px;            margin: 0 auto;            font: 20px/60px "simhei";            text-align: center;        }        #box span{            display: block;<!--不支持宽高先变成块-->            height: 60px;            border:1px solid #181509;        }        #box ul{            border:1px solid #181509;            margin-top: 60px;            box-shadow: 2px 2px #ccc,-2px -2px #ccc;            display: none;        }        #box li{            height:60px;        }    </style></head><body>    <div id="box">        <span id="span1">设置</span>        <ul id="ul1">            <li>搜索设置</li>            <li>高级设置</li>            <li>关闭预测</li>            <li>搜索历史</li>        </ul>    </div></body></html><script type="text/javascript">    //alert("百度一下你就知道");    /*    当鼠标移入span的时候，让ul显示出来    1.当鼠标移入span的时候，让ul样式的display变成block    2.当鼠标移出span的时候，让ul样式的display变为none    在css里面找标签通过选择器 document.getElementById    */    //alert(document.getElementById("span1"));    document.getElementById("span1").onmouseover = function(){    //当鼠标移入span的时候，让ul样式的display变成block        document.getElementById("ul1").style.display = "block";    }    document.getElementById("span1").onmouseout = function(){        //当鼠标移入span的时候，让ul样式的display变成none        document.getElementById("ul1").style.display = "none";    }</script>

案例效果

这里写图片描述

阅读全文

0 0