原生JS鼠标移入移出事件

开发工具与关键技术:DW  JavaScript
撰写时间:2019年2月15日

在css中可以用伪类hover来实现鼠标的移入移出效果,而在JS中也可以用鼠标移入onmouseover事件和鼠标移出onmouseout事件来实现。当然,两者肯定有区别的。下面我只介绍用JS来写的方法,html的结构布局和css的样式代码如下:
在这里插入图片描述

@charset "utf-8";
/* CSS Document */
.box{
	width: 70px;
	height: 27px;
	margin: 0 auto;
}
.box button{
	padding: 2px 20px 2px 7px;
	background: url(../Images/ckjihua.gif) left top;
	border: none;
	color: #fff;
	position: relative;
}
.box button i{
	border: 5px solid #fff;
	border-color: #fff transparent transparent transparent;
	width: 0px;
	height: 0px;
	position: absolute;
	top: 9px;
	right: 3px;
}
.box button i.sq{
	border-color: transparent transparent #fff transparent;
	top: 3px;
}
#tabulation{
	width: 300px;
	height: 260px;
	margin: 0 auto;
	display: none;
}
.bos{
	width: 300px;
	height: 260px;
	border: 1px solid #13DFE9;
	color: #C88D8E;
}
.bos th,.bos td{
	text-align: center;
}
.bos td{
	border-top: 1px solid #13DFE9;
}
.bos tr:nth-child(even){
	background: #13DFE9;
}

最后就是鼠标移入时隐藏的表格显示出来和鼠标移出时表格隐藏的JS代码:
在这里插入图片描述
再看看效果图:
在这里插入图片描述
在这里插入图片描述
查看和收起的按钮也是通过JS的innerHTML来改变按钮的内容以及标签实现的。当鼠标移入前按钮的内容为查看、三角形向下;鼠标移入后按钮的内容变成收起、三角形向上;鼠标移出后按钮又会变回原来的样子。

©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页