js实现简单的二级菜单鼠标事件

作者: 最帅的坏兔子 | 来源:发表于2018-11-12 23:56 被阅读7次

js实现简单的二级菜单鼠标事件
js设置或禁用鼠标右键菜单
jquery实现鼠标滑过div出现二级菜单
jQuery下拉菜单和stop()方法
Jquery总结
CSS常用菜单（四）
js实现菜单下拉框
原生JS实现Ajax
DOM事件总结
事件


<!DOCTYPE html>

<html>

<head>

    <title>二级菜单鼠标事件</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        .container{

            width: 100px;

            height: 40px;

            border: 1px solid #ff4433;

        }

        .fruits{

            width: 100px;

            height: auto;

            display: none;

        }

        .fruits>ul{

            list-style: none;

        }

        .fruits>ul>li{

            width: 100%;

            border: 1px solid #000000;

        }

    </style>

</head>

<body>

    <div class="container" id="Obj">水果</div>

    <div class="fruits" id="Obj1">

        <ul>

            <li>苹果</li>

            <li>香蕉</li>

            <li>菠萝</li>

            <li>西瓜</li>

            <li>李子</li>

            <li>柠檬</li>

        </ul>

    </div>

    <script type="text/javascript">

        var el = document.getElementById("Obj");

        var elChild = document.getElementById("Obj1");

        el.addEventListener("mouseover",mOver);

        el.addEventListener("mouseout",mOut);

        elChild.addEventListener("mouseover",mOver);

        elChild.addEventListener("mouseout",mOut);

        function mOver(obj){

            document.getElementById("Obj1").style.display="block";

        }

        function mOut(obj){

            document.getElementById("Obj1").style.display="none";

        }

    </script>

</body>

</html>



`