原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>
好了,就写到这里了!