利用JS控制当鼠标移上去的时候div的显示/隐藏功能教程

2021-08-26 作者：匿名阅读：1846次

前言

本站做一个知识付费网站的时候，需要把鼠标放在课程目录名称上的时候，要隐藏相应的内容，然后把课程是否付费显示出来，效果图如代码下：

<html >
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
function showDiv(divID) {
            if (divID != null && divID != "") {
                var v = document.getElementById(divID);
                if (v.style.display == "none") {
                    v.style.display = "inline";
                }
            }
        }
        function hiddenDiv(divID) {
            if (divID != null && divID != "") {
                var vv = document.getElementById(divID);
                if (vv.style.display == "inline") {
                    vv.style.display = "none";
                }
            }
        }
</script>
</head>
<body>
<form id="form1" runat="server">
    <div id="div1"  style="width:120px;" onmouseover="showDiv('subDiv1')" onmouseout="hiddenDiv('subDiv1')">
    第一个div
    <div>
    <div id="subDiv1" style="display:none; width:120px;">
    <a href="" >第一个div子类1</a><br />
    <a href="" >第一个div子类2</a>
    </div>
    </div>
    </div>
    <div id="div2" style="width:120px;" onmouseover="showDiv('subDiv2')" onmouseout="hiddenDiv('subDiv2')">
    第二个div
    <div>
    <div id="subDiv2" style="display:none; width:120px;"">
    <a href="" >第二个div子类1</a><br />
    <a href="" >第二个div子类2</a><br />
    <a href="" >第二个div子类3</a>
    </div>
    </div>
    </div>
    </form>
</body>
</html>

效果如如下：