当前位置： 首页 > news >正文

html中如何写一个提示框,css画一个提示框

news 文章来源：https://blog.csdn.net/weixin_47634487/article/details/139814675 2024/10/25 8:22:58

在HTML中，提示框通常使用<div>元素来创建，然后使用CSS进行样式化。以下是一个示例，展示如何在HTML中写一个提示框，并使用CSS来设计其外观。

HTML

首先，创建一个HTML文件，其中包含一个提示框的结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>提示框示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="tooltip"><button class="tooltip-button">鼠标悬停我</button><div class="tooltip-text">这是一个提示框</div></div>
</body>
</html>

CSS

接下来，创建一个CSS文件（如styles.css），并添加以下样式来设计提示框：

body {font-family: Arial, sans-serif;
}.tooltip {position: relative;display: inline-block;
}.tooltip .tooltip-button {padding: 10px;font-size: 16px;cursor: pointer;
}.tooltip .tooltip-text {visibility: hidden;width: 160px;background-color: #555;color: #fff;text-align: center;border-radius: 5px;padding: 5px;position: absolute;z-index: 1;bottom: 125%; /* 提示框显示在按钮的上方 */left: 50%;margin-left: -80px; /* 使提示框水平居中 */opacity: 0;transition: opacity 0.3s;
}.tooltip .tooltip-text::after {content: "";position: absolute;top: 100%; /* 箭头位于提示框的底部 */left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #555 transparent transparent transparent;
}.tooltip:hover .tooltip-text {visibility: visible;opacity: 1;
}

解释

  1. HTML部分:

    • <div class="tooltip">：包裹按钮和提示框的容器。
    • <button class="tooltip-button">鼠标悬停我</button>：用户悬停的按钮。
    • <div class="tooltip-text">这是一个提示框</div>：实际显示的提示框文本。

  2. CSS部分:

    • .tooltip：设置相对定位，以便后面的提示框可以相对于它定位。
    • .tooltip .tooltip-button：设置按钮的样式。
    • .tooltip .tooltip-text：设置提示框的样式，包括背景颜色、文本颜色、边框半径、定位等。初始状态下，提示框是隐藏的（visibility: hidden和opacity: 0）。
    • .tooltip .tooltip-text::after：使用伪元素创建提示框的箭头。
    • .tooltip:hover .tooltip-text：当鼠标悬停在按钮上时，显示提示框（visibility: visible和opacity: 1）。

效果

当你将鼠标悬停在按钮上时，提示框将会淡入显示。你可以根据需要调整CSS样式以适应你的设计需求。

相关文章：

html中如何写一个提示框,css画一个提示框

在HTML中&#xff0c;提示框通常使用<div>元素来创建&#xff0c;然后使用CSS进行样式化。以下是一个示例&#xff0c;展示如何在HTML中写一个提示框&#xff0c;并使用CSS来设计其外观。 HTML 首先&#xff0c;创建一个HTML文件&#xff0c;其中包含一个提示框的结构&…...

编程日记 2024/6/20 6:25:32

ExoPlayer 学习笔记

https://www.51cto.com/article/777840.html ExoPlayer支持多种媒体格式和流媒体协议的播放器 播放视频&#xff1a;player.play()暂停视频&#xff1a;player.pause()停止播放&#xff1a;player.stop() Media3 ExoPlayer | Android media | Android Developers implem…...

编程日记 2024/6/20 6:23:30

汽车IVI中控开发入门及进阶（二十七）：车载摄像头vehicle camera

前言： 在车载IVI、智能座舱系统中，有一个重要的应用场景就是视频。视频应用又可分为三种，一种是直接解码U盘、SD卡里面的视频文件进行播放，一种是手机投屏，就是把手机投屏软件已视频方式投屏到显示屏上显示，另外一种就是对视频采集设备（主要就是摄像头Camera）的视频源…...

编程日记 2024/6/20 6:19:24

Transformer模型：未来的改进方向与潜在影响

Transformer模型&#xff1a;未来的改进方向与潜在影响 自从2017年Google的研究者们首次提出Transformer模型以来&#xff0c;它已经彻底改变了自然语言处理&#xff08;NLP&#xff09;领域的面貌。Transformer的核心优势在于其“自注意力&#xff08;Self-Attention&#xf…...

编程日记 2024/6/20 6:18:22

ROS 激光雷达

ROS 激光雷达 基本工作原理 激光雷达&#xff08;LIDAR&#xff0c;Light Detection and Ranging&#xff09;是一种用于测量距离的远程感应技术。它通过向目标发射激光并分析反射回来的光来测量目标与激光发射源之间的距离。激光雷达广泛应用于多种领域&#xff0c;包括地理…...

编程日记 2024/6/20 6:17:19

杂说咋说-关于城市化发展和城市治理的几点建议（浙江借鉴）

杂说咋说-关于城市化发展和城市治理的几点建议&#xff08;浙江借鉴&#xff09; 近年来&#xff0c;浙江省坚持一张蓝图绘到底&#xff0c;推动城市化发展和城市治理不断迈上新台阶&#xff0c;全省城市化水平和城市治理能力牢牢居于全国第一方阵。当前&#xff0c;国内外环境…...

编程日记 2024/6/20 6:15:12

Linux 常用命令 - which【定位可执行文件的位置】

简介 which 命令源自于英文单词 "which"&#xff0c;用于在环境变量 PATH 所指定的路径中搜索某个可执行文件或链接&#xff08;如一个系统命令&#xff09;的位置&#xff0c;并返回第一个搜索结果。这个命令会遍历 PATH 环境变量中的所有路径&#xff0c;直到找到…...

编程日记 2024/6/20 6:14:10

js文件导出功能

效果图&#xff1a; 代码示例&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>html 表格导出道</title><script src"js/jquery-3.6.3.js"></script><st…...

编程日记 2024/6/20 6:13:09

PHP转Go系列 | 字符串的使用姿势

大家好&#xff0c;我是码农先森。 输出 在 PHP 语言中的输出比较简单&#xff0c;直接使用 echo 就可以。此外&#xff0c;在 PHP 中还有一个格式化输出函数 sprintf 可以用占位符替换字符串。 <?phpecho 码农先森; echo sprintf(码农:%s, 先森);在 Go 语言中调用它的输…...

编程日记 2024/6/20 6:12:07

vue关于:deep穿透样式的理解

情况一 子组件&#xff1a; <div class"child"><div class"test_class">test_class<div class"test1">test1<div class"test2">test2</div></div></div></div>父组件&#xff1a; …...

编程日记 2024/6/20 6:10:05

算法 |数字计数

给出n个数字,请你求出在给出的这n个数字当中,最大的数字与次大的数字之差,最大的数字与次小的数字之差,次大的数字与次小的数字之差,次大的数字与最小的数字之差. 易错点 1 1 2 3 4 4 次小不是a[1]了 次大也不是a[n-2]了 #include<bits/stdc.h> using namespace std; …...

编程日记 2024/6/20 6:09:02

通义千问调用笔记

如何使用通义千问API_模型服务灵积(DashScope)-阿里云帮助中心 package com.ruoyi.webapp.utils;import com.alibaba.dashscope.aigc.generation.Generation; import com.alibaba.dashscope.aigc.generation.GenerationOutput; import com.alibaba.dashscope.aigc.generation.G…...

编程日记 2024/6/20 6:08:00

Linux常见的压缩文件种类与对应的压缩解压方法

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2024/6/20 6:04:55

LNMP网站架构

一、安装nginx服务 1、关闭防火墙和核心防护 systemctl stop firewalld systemctl disable firewalld setenforce 0 2、安装依赖包 yum -y install pcre-devel zlib-devel openssl-devel gcc gcc-c make 3、创建运行用户 useradd -M -s /sbin/nologin nginx 4、编译安装…...

编程日记 2024/6/20 6:02:53

排序算法及源代码

堆排序&#xff1a; 在学习堆之后我们知道了大堆和小堆&#xff0c;对于大堆而言第一个节点就是对大值&#xff0c;对于小堆而言&#xff0c;第一个值就是最小的值。如果我们把第一个值与最后一个值交换再对最后一个值前面的数据重新建堆&#xff0c;如此下去就可以实现建堆排…...

编程日记 2024/6/20 6:01:50

力扣第206题“反转链表”

在本篇文章中&#xff0c;我们将详细解读力扣第206题“反转链表”。通过学习本篇文章&#xff0c;读者将掌握如何使用迭代和递归的方法来解决这一问题&#xff0c;并了解相关的复杂度分析和模拟面试问答。每种方法都将配以详细的解释&#xff0c;以便于理解。 问题描述 力扣第…...

编程日记 2024/6/20 5:59:48

多模态大模型解读

目录 1. CLIP 2. ALBEF 3. BLIP 4. BLIP2 参考文献 &#xff08;2023年&#xff09;视觉语言的多模态大模型的目前主流方法是&#xff1a;借助预训练好的LLM和图像编码器&#xff0c;用一个图文特征对齐模块来连接&#xff0c;从而让语言模型理解图像特征并进行深层次的问…...

编程日记 2024/6/20 5:58:46

React是什么？

theme: condensed-night-purple highlight: atelier-cave-light React是什么&#xff1f; 官方的解释是&#xff1a;A JavaScript library for building user interfaces用于构建用户界面的 JavaScript 库 那为什么要选择用React呢&#xff1f; 原生的HTML、CSS、JavaScrip的…...

编程日记 2024/6/20 5:57:43

创新入门 | 病毒循环Viral Loop是什么？为何能实现指数增长

今天&#xff0c;很多高速增长的成功创业公司都在采用”病毒循环“的策略去快速传播、并扩大用户基础。究竟什么是“病毒循环”&#xff1f;初创公司的创始人为何需要重视这个策略&#xff1f;这篇文章中将会一一解答与病毒循环有关的各种问题。 一、什么是病毒循环&#xff08…...

编程日记 2024/6/20 5:56:42

鸿蒙HarmonyOS实战：渲染控制、路由案例

条件渲染 简单来说&#xff0c;就是动态控制组件的显示与隐藏&#xff0c;类似于vue中的v-if 但是这里写法就是用if、else、else if看起来更像是原生的感觉 效果 循环渲染 我们实际开发中&#xff0c;数据一般是后端返回来的对象格式&#xff0c;对此我们需要进行遍历&#…...

编程日记 2024/6/20 5:55:40

【Linux】进程控制2——进程等待（waitwaitpid）

1. 进程等待必要性 我们知道&#xff0c;子进程退出&#xff0c;父进程如果不管不顾&#xff0c;就可能造成"僵尸进程”的问题&#xff0c;进而造成内存泄漏。另外&#xff0c;进程一旦变成僵尸状态&#xff0c;那就刀枪不入&#xff0c;“杀人不眨眼”的kill -9 也无能为…...

编程日记 2024/6/20 5:53:38

SpringBoot 统计接口调用耗时的多种方式

在实际开发中&#xff0c;了解项目中接口的响应时间是必不可少的事情。SpringBoot 项目支持监听接口的功能也不止一个&#xff0c;接下来我们分别以 AOP、ApplicationListener、Tomcat 三个方面去实现三种不同的监听接口响应时间的操作。 AOP 首先我们在项目中创建一个类 &am…...

编程日记 2024/6/20 5:50:34

Linux系统安装Ruby语言

Ruby是一种面向对象的脚本语言&#xff0c;由日本的计算机科学家松本行弘设计并开发&#xff0c;Ruby的设计哲学强调程序员的幸福感&#xff0c;致力于简化编程的复杂性&#xff0c;并提供一种既强大又易于使用的工具。其语法简洁优雅&#xff0c;易于阅读和书写&#xff0c;使…...

编程日记 2024/6/20 5:49:31

网络安全练气篇——OWASP TOP 10

1、什么是OWASP&#xff1f; OWASP&#xff08;开放式Web应用程序安全项目&#xff09;是一个开放的社区&#xff0c;由非营利组织 OWASP基金会支持的项目。对所有致力于改进应用程序安全的人士开放&#xff0c;旨在提高对应用程序安全性的认识。 其最具权威的就是“10项最严重…...

编程日记 2024/6/20 5:48:29

python实现进度条的方法和实现代码

在Python中&#xff0c;有多种方式可以实现进度条。这里&#xff0c;我将介绍七种常见的方法&#xff1a;使用tqdm&#xff08;这是一个外部库&#xff0c;非常流行且易于使用&#xff09;、rich、click、progressbar2等库以及纯Python的print函数与time库来模拟进度条。 目录…...

编程日记 2024/6/20 5:45:26

被拷打已老实！面试官问我 #{} 和 ${} 的区别是什么？

引言&#xff1a;在使用 MyBatis 进行数据库操作时&#xff0c;#{} 和 ${} 的区别是面试中常见的问题&#xff0c;对理解如何在 MyBatis 中安全有效地处理 SQL 语句至关重要。正确使用这两种占位符不仅影响应用的安全性&#xff0c;还涉及到性能优化。 题目 被拷打已老实&…...

编程日记 2024/6/20 5:44:24

C# —— while循环语句

作用 让顺序执行的代码 可以停下来 循环执行某一代码块 // 条件分支语句: 让代码产生分支 进行执行 // 循环语句 : 让代码可以重复执行 语法 while循环 while (bool值) { 循环体(条件满足时执行的代码块) …...

编程日记 2024/6/20 5:42:21

力扣第205题“同构字符串”

在本篇文章中&#xff0c;我们将详细解读力扣第205题“同构字符串”。通过学习本篇文章&#xff0c;读者将掌握如何使用哈希表来解决这一问题&#xff0c;并了解相关的复杂度分析和模拟面试问答。每种方法都将配以详细的解释&#xff0c;以便于理解。 问题描述 力扣第205题“…...

编程日记 2024/6/20 5:41:20

探索RESTful API开发，构建可扩展的Web服务

介绍 当我们浏览网页、使用手机应用或与各种互联网服务交互时&#xff0c;我们经常听到一个术语&#xff1a;“RESTful API”。它听起来很高深&#xff0c;但实际上&#xff0c;它是构建现代网络应用程序所不可或缺的基础。 什么是RESTful API&#xff1f; 让我们将RESTful …...

编程日记 2024/6/20 5:40:18

苹果安卓网页的H5封装成App的应用和原生开发的应用有什么不一样？

H5封装类成App的应用和原生应用有什么不一样&#xff1f;——一对比谈优缺点 1. 开发速度和复用性 H5封装的App优势&#xff1a;一次编写&#xff0c;多平台运行。你只需要使用一种语言编写代码&#xff0c;就可以发布到不同的平台&#xff0c;降低开发成本。 原生应用优势&…...

编程日记 2024/6/20 5:38:16

网站运营成本明细/百度站长之家

实现一个记事本: 这里实现的是记事本的打开与保存功能。 更多Java学习资源尽在B站账号&#xff1a;清风学Java https://space.bilibili.com/591988762 只做Java分享&#xff0c;欢迎个位小伙伴前来观看&#xff0c;更多优质学习资源持续更新中… 知识提示: JTextArea中&#…...

编程日记 2024/10/25 4:27:50

专门做折扣的网站/慧达seo免登录发布

阅读目录场景接口示例接口实现场景 A、一个公司要计算所有职员的薪水。 B、每个职员的薪水计算方式不同。 接口示例 Animal 接口可以存储任何实现对象。 package mainimport "fmt"type Animal interface {Talk()Eat()Name() string }type Dog struct { }func (d …...

编程日记 2024/10/24 23:44:45

什么网站赚的钱最多/旺道seo怎么优化网站

pageX/pageY:鼠标相对于整个页面的X/Y坐标。注意&#xff0c;整个页面的意思就是你整个网页的全部&#xff0c;比如说网页很宽很长&#xff0c;宽2000px&#xff0c;高3000px&#xff0c;那pageX,pageY的最大值就是它们了。特别说明&#xff1a;IE不支持&#xff01; //-------…...

编程日记 2024/10/24 22:58:09

国外域名注册哪个网站好/重庆seo是什么

基础语法:关键字:被java语言赋予特定含义的单词class,public,static,void,package....goto和const作为保留字使用,目前不使用!标识符:就是给类/接口/方法/变量起名字!(见名知意)书写代码上,一定符合这个规则!包:不管是多级包还是单级包,字母全部小写,中间可以点隔开类/接口:单个…...

编程日记 2024/10/24 13:47:42

程序员做游戏还是做网站好/seo中文

秋招马上要来了&#xff0c;之前我在春招的结尾意外地收获了阿里的Offer&#xff0c;之所以写下这篇文章是为了帮助更多Java程序员朋友们&#xff0c;希望能帮助到你们。 其实我并不是什么很厉害的大神&#xff0c;我也不渴望成为别人眼中的大神&#xff0c;我只是踏实地一步一…...

编程日记 2024/10/24 9:45:29

山西高端建设网站/培训心得体会

与其他投资渠道和理财工具相比&#xff0c;创业在上述层面上&#xff0c;更多了一重生活方式的含义。创业是一种生活方式&#xff0c;在某种意义上&#xff0c;生活方式也在一定程度改变着创业的思路和方向。 理财市场风起云涌&#xff0c;朝“盈”夕“亏”&#xff0c;然而创业…...

编程日记 2024/10/24 5:10:12