鼠标移上显示的下拉菜单，和鼠标移上时显示的导航，html，JavaScript代码

最新推荐文章于 2023-08-07 15:13:31 发布

zayyo

最新推荐文章于 2023-08-07 15:13:31 发布

阅读量431

点赞数

分类专栏：前端文章标签： javascript html css3

本文链接：https://blog.csdn.net/weixin_45215308/article/details/106292119

版权

前端专栏收录该内容

107 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<Style>
*{
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
#box{
    width: 100px;
    border: 1px solid #000;
    line-height: 30px;
    text-align: center;
    margin: 50px auto;
}
#box ul{display: none;
}
span{
    background:url(up.gif) no-repeat 14px  center;
    display: block;
line-height: 30px;
}
</Style>
</head>
<body>
    <div id="box">
        <span id="title"> 金属</span>
            <ul id="ul">
                <li>黄金</li>
                <li>铜</li>
                <li>银</li>
                <li>铁</li>
                <li>铅</li>
            </ul>
    </div>
    <script>
let oBox=document.getElementById("box");
let oTitle=document.getElementById("title");
let oUl=document.getElementById("ul");
oBox.onmouseover=function (){
    oUl.style.display="block";
    oTitle.style.background="url(down.gif)no-repeat 14px center";
}
oBox.onmouseout=function (){
    oUl.style.display="none";
    oTitle.style.background="url(up.gif)no-repeat 14px center";
}
    </script>
</body>
</html>