【fgm.cc练习1-6】鼠标移入移出事件&显示与隐藏

最新推荐文章于 2021-12-28 17:33:56 发布

denguing

最新推荐文章于 2021-12-28 17:33:56 发布

阅读量379

点赞数

分类专栏： fgm.cc 文章标签： HTML css JavaScript 前端

本文链接：https://blog.csdn.net/DGT4720/article/details/103020150

版权

fgm.cc 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文通过一个fgm.cc的练习案例，探讨如何利用JavaScript处理鼠标移入和移出事件，实现元素的显示与隐藏。通过修改HTML、CSS和JavaScript代码，实现了动态效果。

摘要由CSDN通过智能技术生成

练习网址：http://www.fgm.cc/learn/lesson1/06.html
尝试鼠标事件的函数里面，通过增加类名{display：block}来实现显示；删除类名来隐藏，结果跑不起来。然后就用了以下方法，直接改style.display。
代码如下：
HTML

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>记住密码提示框</title>
	<link rel="stylesheet" href="6_password.css">
</head>
<body>
	<!-- 添加label标签点击文字的时候也会选中或者取消，提高用户体验度 -->
	<div id="choose">
		<label><input type="checkbox" name="remember" value="两周内自动登录">两周内自动登录</label>
	</div>
	<div id="infor">
			为了您的信息安全，请不要在网吧或公用电脑上使用此功能！
	</div>
	<script src="6_password.js"></script>
</body>
</html>

CSS

#choose {
	width: 200px;
	margin: 0 auto;
	font-size: 12px;
	vertical-align: middle;
}
/*外面的div和input都要vertical-align：middle就可以使复选框和文本对齐*/
input {
	vertical-align: middle;
}
#infor {
	font-size: 14px;
	width: 200px;
	background: #FFCC99;
	border: 1px solid #FF9900;
	padding: 5px;
	margin: 5px 580px;
	display: none;
}

JavaScript

window.onload = function() {
	var choose = document.getElementById("choose");
	var infor = document.getElementById("infor");
	choose.onmouseover = function() {
		infor.style.display = "block";
	}
	choose.onmouseout = function() {
		infor.style.display = "none";
	}
}