JavaScript笔记01----鼠标提示

最新推荐文章于 2024-08-30 20:29:15 发布

_kirakira_

最新推荐文章于 2024-08-30 20:29:15 发布

阅读量105

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43212582/article/details/104741033

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML+CSS生成静态网页
JS可以在静态网页上添加交互和功能
部分事件可以理解为用户的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
		<style>
			#div1 {width: 200px;height: 100px;background: #55aaff;border: 1px solid #999;}
		</style>
	</head>
	<body>
		<input type="checkbox" />
		<div id="div1">
			为了您的信息安全，请...
		</div>
	</body>
</html>

效果：

设置display:none;可以把文字隐藏

目标：鼠标移入到input上的时候，让div1显示，鼠标移出input的时候，让div1隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
		<style>
			#div1 {width: 200px;height: 100px;background: #55aaff;border: 1px solid #999;display: none;}
		</style>
	</head>
	<body>
		<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';"/>
		<div id="div1">
			为了您的信息安全，请...
		</div>
	</body>
</html>

在有些浏览器中，可能要把下面的代码作更改才能达到效果：

<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';"/>

换成：

<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"/>

特效原理概括：响应用户操作，对页面元素（标签）进行某种修改

可以借用变量和函数实现代码重用

继续更改

<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"/>

更改后：（函数在script标签里面）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
		<style>
			#div1 {
			width: 200px;
			height: 100px;
			background: #55aaff;
			border: 1px solid #999;
			display: none;}
		</style>
		<script>
			function showtext()
			{document.getElementById('div1').style.display='block';}
			function hidetext()
			{document.getElementById('div1').style.display='none';}
		</script>
	</head>
	<body>
		<input type="checkbox"
		 onmouseover="showtext()"
		 onmouseout="hidetext()"/>
		<div id="div1">
			为了您的信息安全，请...
		</div>
	</body>
</html>

_kirakira_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript笔记01----鼠标提示

HTML+CSS生成静态网页JS可以在静态网页上添加交互和功能部分事件可以理解为用户的操作<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {width: 200p...
复制链接

扫一扫

专栏目录