JS小项目实践-勾选框提示

最新推荐文章于 2025-11-09 14:47:13 发布

原创最新推荐文章于 2025-11-09 14:47:13 发布 · 373 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

web 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用HTML和JavaScript创建一个带有鼠标悬停提示的勾选框，当鼠标移入勾选框时，显示提示内容；鼠标移出时，提示内容消失。此功能适用于网页表单中增加用户体验。

勾选框提示

*题目来源：B站Js从入门到精通视频

题目描述

建立勾选框，定义事件使得鼠标移入时有内容出现，鼠标移出内容消失。
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   #div1 {
    width: 100px;
    height: 50px;
    background-color: blanchedalmond;
    color: black;
    border : 1px;
    display: none;
      }
  </style>
 </head>
 <body>
  <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';" />
  <div id="div1">
   请勾选
  </div>
 </body>
</html>