第一个JS效果--鼠标提示框

于 2018-11-03 12:50:39 发布
阅读量169 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunny_Destiny/article/details/104492835
版权

第一个JS效果--鼠标提示框

先来看一下效果图。


7861972-0b8232324797be41.png
鼠标移入前
7861972-41627db926e9210f.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
小晴天.jpg
sunny_Destiny
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 实现 鼠标移到下拉框时自动全部打开
03-31
js 实现 鼠标移到下拉框时自动全部打开! 值得下载看看!资源免费,大家分享!!
选中文本框的默认内容
Byte_Dance的博客
12-27 958
html> lang="en"> charset="UTF-8"> 设置输入框默认文字内容 type="text/javascript" src="$function.js"> type="text" id="input" value="请输入内容"> type="submit" value="搜索"> $("input")
JS鼠标提示框
xiaoleng_pj的博客
03-07 1167
（鼠标悬浮提示）前两天，看到126邮箱登陆界面上有个安全提示的功能鼠标提示框，如下图，感觉有点意思，正好自己正在学习JS，于是自己百度了一下视频，现在和大家分享下。
js实现默认文本框信息 鼠标点击时没有离开时显示
a18770840362的博客
01-20 109
<style type="text/css"> #tb { border:1px solid #0094ff; margin:5px auto; border-collapse:collapse;/*是指让行和列的边框相融合*/ } tr ...
JS中使用react-tooltip插件实现鼠标悬浮显示框
10-17
在进行Web开发时，常常需要实现一些交互式的用户界面效果，其中鼠标悬浮显示提示框是一个非常普遍的需求，它可以帮助用户了解某个元素或链接的作用。在React项目中，实现这样的功能可以借助react-tooltip这个第三方...
Vue中实现鼠标悬浮显示提示框通常使用的是.docx
05-15
其中，一个常见的需求就是在用户将鼠标悬停在某个元素上时显示一个提示框（tooltip），这对于提供额外的信息或者帮助是非常有用的。本文将详细介绍如何在Vue项目中实现这一功能。 #### 二、技术方案概述 在Vue中...
jquery简单的鼠标悬停按钮显示浮动提示框效果代码
11-10
本文将深入探讨如何使用jQuery实现一个简单的鼠标悬停按钮时显示浮动提示框的效果，这对于网页交互设计至关重要。 首先，让我们理解基本概念。`悬停`是鼠标指针在元素上停留的事件，而`浮动提示框`则是一种常见的UI...
JS实现提示框跟随鼠标移动
10-16
在这篇文章中，我们将会深入探讨如何使用JavaScript来实现一个提示框跟随鼠标移动的功能。这是网页交互设计中比较常见的一种效果，能够给用户提供更加直观的操作反馈。在介绍具体的实现方法之前，我们先要了解几个...
jquery实现鼠标滑过显示提示框的方法
10-24
在第一个实例中，通过CSS样式设置了提示框的初始状态为隐藏，鼠标滑过时，通过jQuery的animate()方法使提示框从上方向下滑动出现，鼠标离开时则反向滑动隐藏提示框。这里的animate()方法接受一个对象作为参数，该...
VB计算机机房管理系统设计(源代码+系统).zip
08-18
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
毕业设计论文写作模板.zip
08-18
毕业设计 题目： 基于xxxxxx框架的设计与实现 姓 名: 学 号: 层 次: 本科 专 业: 软件工程 班 级: xx级软件工程01班 指导教师: 2022年5月 xxxx学院教务处 制 独创性声明 一、本设计是本人独立完成； 二、本设计没有任何抄袭行为； 三、若有不实，一经查出，请答辩委员会取消本人答辩资格。 承诺人（签名）： 年 月 日
基于springboot的高校心理教育辅导系统 源码+数据库（毕业设计）
08-18
基于Vue.js和SpringBoot的高校心理教育辅导系统是一个综合性的在线平台，旨在为高校学生、教师和管理员提供心理教育和辅导服务。该系统分为管理后台和用户网页端，支持多种角色使用，包括管理员、学生和教师。 辅导预约：学生可以通过该模块预约心理辅导服务，管理员可以查看和管理预约信息。 测评结果：系统提供心理测评工具，学生可以在线完成测评，系统自动生成测评结果供学生和教师查看。 试题和试卷：教师可以创建和管理试题库，设计试卷并组织在线考试，学生可以在线参加考试并查看成绩。 考试：系统支持在线考试功能，包括考试安排、考试监控、成绩统计等。 留言板：提供一个交流平台，学生、教师和管理员可以发布留言、交流心得和反馈意见。 录屏：https://www.bilibili.com/video/BV1Ct4y1d7L4 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
POLYGON Dungeons - Low Poly 3D Art by Synty v1.9.2.unitypackage
最新发布
08-18
POLYGON Dungeons - Low Poly 3D Art by Synty v1.9.2
字节跳动：抖擞传统，短视频与传统文化研究报告
08-18
字节跳动：抖擞传统，短视频与传统文化研究报告
django admin 的一个主题 ，基于element-ui+vue开发，重写和优化90%以上的页面
08-18
django admin 的一个主题 ，基于element-ui+vue开发，重写和优化90%以上的页面。让django admin更符合国人的使用习惯。并且实现了不用修改任何代码为django admin换肤。100%兼容原生admin
基于springboot的足球俱乐部管理后台 源码+数据库（毕业设计）
08-18
基于Vue.js和SpringBoot的足球俱乐部管理后台是一个功能全面的系统，它分为管理后台和用户网页端，旨在为管理员和学员提供便捷的操作体验。管理员可以通过管理后台进行学员管理、教师管理、课程安排、课程签到等操作，同时还可以查看和处理商品信息以及足球商品订单。学员则可以通过用户网页端查看课程安排、进行课程签到、浏览商品信息并下单购买。整个系统采用前后端分离的架构，前端使用Vue.js进行开发，后端使用SpringBoot框架，确保了系统的高性能和可扩展性。 录屏：https://www.bilibili.com/video/BV1vw41177rR 教程：https://space.bilibili.com/417412814/channel/collectiondetail?sid=2242844
VB客运中心汽车售票管理系统设计(论文+源代码).zip
08-18
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
分享一款特别好看特别美的仿微博前端页面
08-18
分享一款特别好看特别美的仿微博前端页面
画四个小球和三个框，鼠标拖拽四个小球进入第一个框内，弹出成功提示框，写一段网页代码
05-29
好的，以下是基于HTML、CSS和JavaScript的代码实现： ```html <!DOCTYPE html> <html> <head> <title>小球拖拽</title> <style> #ballContainer { display: flex; justify-content: space-between; align-items: center; height: 300px; } .ball { width: 50px; height: 50px; background-color: red; border-radius: 50%; margin: 10px; cursor: pointer; } .box { width: 100px; height: 100px; border: 2px solid black; margin: 10px; display: flex; justify-content: center; align-items: center; } .success { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: green; color: white; padding: 10px; border-radius: 5px; display: none; } </style> </head> <body> <div id="ballContainer"> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> </div> <div id="boxContainer"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div id="successMsg" class="success">拖拽成功！</div> <script> const balls = document.querySelectorAll('.ball'); const boxes = document.querySelectorAll('.box'); const successMsg = document.querySelector('#successMsg'); let draggedBall = null; for (let ball of balls) { ball.addEventListener('dragstart', () => { draggedBall = ball; }); ball.addEventListener('dragend', () => { draggedBall = null; }); } for (let box of boxes) { box.addEventListener('dragover', (e) => { e.preventDefault(); }); box.addEventListener('drop', (e) => { e.preventDefault(); if (e.target.classList.contains('box') && e.target.children.length === 0) { e.target.appendChild(draggedBall); successMsg.style.display = 'block'; setTimeout(() => { successMsg.style.display = 'none'; }, 2000); } }); } </script> </body> </html> ``` 在这个实现中，我们首先使用了flex布局，将小球和框排列在一行，方便用户进行拖拽操作。小球和框都是使用div元素实现的，小球的样式通过CSS设置，框的样式同样也是通过CSS设置。对于提示框，我们使用了一个绝对定位的div元素，并将其初始状态设为不可见。 在JavaScript代码中，我们首先使用querySelector和querySelectorAll方法获取到需要操作的元素，然后为每个小球添加了dragstart和dragend事件，分别在拖拽开始和结束时记录和取消记录拖拽的小球。对于框，我们为其添加了dragover和drop事件，以防止默认行为和获取拖拽的元素。在拖拽结束时，我们首先判断放置的目标框是否为空，如果为空则将小球添加到框中，同时弹出提示框并在2秒后隐藏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值