第一个JS效果--鼠标提示框
先来看一下效果图。
![7861972-0b8232324797be41.png](https://i-blog.csdnimg.cn/blog_migrate/bb2d9cfdac3cf6c86fd154b1fb1cbf06.png)
鼠标移入前
![7861972-41627db926e9210f.png](https://i-blog.csdnimg.cn/blog_migrate/7393223e1ac5cf90e837febbdaf1997b.png)
鼠标移入后
接下来我们来分析一下代码。
<html>
<head>
<meta charset="utf-8">
<title>鼠标提示框</title>
<style>
#div1{
width: 200px;
height: 100px;
background: #ccc;
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>
懂一点HTML和CSS的人应该都能看懂,这次我们主要来熟悉两个单词"onmouseover"、"onmouseout",鼠标移入和鼠标移除,当鼠标移入时,提示框是呈"block"显现模式,当鼠标移除时,提示框是呈"none"隐藏模式。好了,今天的分享就到这里。
愿你三冬暖,愿你春不寒;愿你天黑有灯,下雨有伞。
![7861972-c15692bc3ce6fc3a.jpg](https://i-blog.csdnimg.cn/blog_migrate/ba985222f701324db7cb9077569ad267.jpeg)
小晴天.jpg