鼠标移入就显示弹框，移出弹框就消失_html鼠标放置在文字上显示新窗口,移开窗口消失-CSDN博客

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/52150786

本文介绍了一个使用HTML、CSS和jQuery实现的下拉菜单案例。该菜单包括一个可展开的按钮和一个包含多个选项的列表。通过jQuery监听鼠标悬停事件来显示和隐藏菜单，并更改按钮背景颜色。

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

html:

<span style="font-size:14px;"> <div id="menu">
        <div id="menuBtn">
            <div class="bor">
                <img src="img/menu.png" />
                <a href="#">菜单</a>
            </div>
        </div>
        <ul id="menuList">
            <li><a href="#">香蕉</a></li>
            <li><a href="#">苹果</a></li>
            <li><a href="#">鸭梨</a></li>
            <li><a href="#">橙子</a></li>
        </ul>
    </div></span>

css:

<span style="font-size:14px;">#menu{
        width:8.33%;
        float:right;
        margin-top:0;
    }
    #menuBtn{
        width:100%;
        background-color:#7D9599;
    }
    #menuBtn img{
        margin-left:24.16%;
        margin-top:7%;
    }
     #menuBtn a{
         color:#fff;
         font-family:"Microsoft YaHei";
         font-size:1em;
         margin-left:1%;
         margin-top:0.4%;
         position:absolute;
        text-decoration:none;
     }
     #menuList{
         list-style:none;
         margin-top:0;
     }
     #menuList li{
         width:100%;
         background-color:#7D9599;
         margin-top:1%;
        
         
     }
      #menuList li:hover{
          background-color:#9CC0CC;
      }
       #menuList li:visited{
          background-color:#4B5E66;
      }
     #menuList li a{
        text-decoration:none;
        color:#fff;
         font-family:"Microsoft YaHei";
         font-size:1em;
         margin-top:0.4%;
         padding-left:2%;
         position:absolute;
     }
     #menuBtn .bor{
         width:100%;
     }</span>

jquery:

<span style="font-size:14px;">var menuBtn = document.getElementById("menuBtn");
var menuList = document.getElementById("menuList");</span><pre name="code" class="html"><span style="font-size:14px;">//移入移出菜单
$("#menuList").hide();
menuBtn.<span style="color:#CC0000;">onmouseover </span>= function () {
    if (menuList.style.display === "none") {
        menuList.style.display = "block";
    }
    $("#menuBtn").attr('style', 'background-color:#9CC0CC;height:19.60%;');
}
menuBtn.<span style="color:#CC0000;">onmouseleave </span>= function () {
    if (menuList.style.display === "block") {
        menuList.style.display = "none";
    }
    $("#menuBtn").attr('style', 'background-color:#7D9599;height:19.60%;');
}
$("#menuList").mouseover(function () {
    $("#menuList").show();
    menuList.style.display = "block";
});
$("#menuList").mouseleave(function () {
    $("#menuList").hide();

});
</span>