前端div显示隐藏分析

小咪咪 2021-11-29 18:34 424阅读 0赞

/\*div \{border: 1px solid blue;\}\*/

ul\{  
      list-style: none;  
      position: relative;  
    \}

ul>li\{  
      padding: 3px 5px;  
      border: 1px skyblue solid;  
      width: 100px;  
    \}

**    li > div\{  
      display: none;  
    \}**

**    li:hover > div\{  
      display: block;  
    \}**

</style>

<div>

<ul>  
   
 <li  **οnmοuseοver="showDiv()" οnmοuseleave="hideDiv()"**>   
    <a >前端开发</a>  
    <div id="li2" style="width:600px;position: absolute;left: 110px;top: -1px;border:1px solid red;">  
        <div >  
                 
        <div >  
            <div >  
                <p><span>知识体系</span></p>  
                <div>  
                    <dl>  
                        <dt><a href="jj.com">前端基础</a></dt>  
                        <dd class="cf">  
                              
                            <a href="bb.com">HTML</a>  
                              
                            <a >CSS</a>  
                              
                            <a href="cc.com">JavaScript</a>  
                              
                            <a >HTML5</a>  
                              
                            <a >CSS3</a>  
                              
                            <a >技术前瞻</a>  
                              
                        </dd>  
                    </dl>  
                      
                    <dl>  
                        <dt><a >前端进阶</a></dt>  
                        <dd class="cf">  
                              
                            <a >Typescript</a>  
                              
                            <a >前端安全</a>  
                              
                            <a >项目实战</a>  
                              
                        </dd>  
                    </dl>  
                </div>  
            </div>              
        </div>

</div>  
    </div>  
</li>  
<li>  
  <a>后端知识</a>   
 </li>  
 <li>  
  运维知识  
 </li>  
</ul>

</div>  
</body>  
</html>

**<script type="text/JavaScript">**

**function showDiv()\{  
    document.getElementById("li2").style.display = 'blok';  
\}**

**function hideDiv()\{          
    document.getElementById("li2").style.display = 'none';  
\}**

**window.onload = hideDiv();  
</script>**

其中红色部分和蓝色部分含义一致。