javascript模拟提示框

最新推荐文章于 2024-04-08 14:07:57 发布

原创最新推荐文章于 2024-04-08 14:07:57 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #dom

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript创建的简易提示框效果。当鼠标悬停在标签上时，会显示一个带有简单文本的提示框；鼠标移开后，提示框消失。通过这个例子，读者可以了解到如何使用基本的前端技术实现交互效果。

<!DOCTYPE HTML>
<html>
<head>
	<title>模拟提示框</title>
	<style>
	#div1{
	width:100px;
	height:100px;
	background:#FFCC99;
	border:1px solid #FF9900;   
	display:none;
}
	</style>
</head>
<body>
<label  onmouseover="demo()" onmouseout="Cancel()"><input type="checkbox"/>点我</label>
<div id="div1" >
这是一个简单的提示框。
</div>
<script>
function demo(){
	document.getElementById("div1").style.display='block';
}
function Cancel(){
	document.getElementById("div1").style.display='none';
}
</script>


</body>
</html>