Js动态触碰显示隐藏事件

原Js方法

• html关键字 ‘onmouseover’
• html关键字 ‘onmouseout’

JQuery Js方法

• JQuery关键字 ‘show()’
• JQuery关键字 ‘hide() ’

第一步先在html创建个<button>按钮，<div>窗口

 <button id = "buttonid" onmouseover="divBlack()" onmouseout="divNone()">碰我一下</button>


    <div id = "div1" style="width:300px; height:300px; border: 1px solid red; display: none;cursor: pointer"></div>

这一步写好之后，开始下面js的代码

原Js方法

原js方法，我这里要配合html的事件属性‘onmouseover’，‘onmouseout’ 这两个触碰事件

function divBlack(){
        document.getElementById("div1").style.display = "block";

    }

function divNone(){
        document.getElementById("div1").style.display = "none";

    }

这个就是js触碰显示和隐藏的方法之一了，下面来演示JQuery js方法，JQuery相对于原js要简单的多，不需要html的事件属性，直接在JQuery调用封装好的方法就行了

JQuery Js方法

<button id = "buttonid">碰我一下</button>


    <div id = "div1" style="width:300px; height:300px; border: 1px solid red; display: none;cursor: pointer"></div>

JQuery的关键字是'show()'和'hide()'

直接上代码

<script>

  layui.use(['layer', 'jquery'], function () {
        // 得到模块实例对象
        var layer = layui.layer;
        var $ = layui.jquery;


        $(function(){

            $('#buttonid').hover(function(){
                $("#div1").show();
            },function(){
                $("#div1").hide();
            });

        });
    });

</script>

好了，就写到这里了！