原生JS鼠标移入移出事件

最新推荐文章于 2025-07-17 18:35:20 发布

烧脑袋

最新推荐文章于 2025-07-17 18:35:20 发布

阅读量7.8k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44543312/article/details/87362835

本文介绍如何使用JavaScript的onmouseover和onmouseout事件来实现元素的鼠标移入移出交互效果，包括隐藏和显示表格，以及按钮内容和样式的动态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术：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来改变按钮的内容以及标签实现的。当鼠标移入前按钮的内容为查看、三角形向下；鼠标移入后按钮的内容变成收起、三角形向上；鼠标移出后按钮又会变回原来的样子。