首页 > 其他分享 >HTML小白学习之提示工具

HTML小白学习之提示工具

时间:2024-04-07 16:03:30浏览次数:23  
标签:提示 tooltip color 小白 HTML 5px border transparent tooltiptext

我们来制作一个简单提示工具

一、我们先做body部分:

<div class="tooltip">你好

        <span class="tooltiptext">我是小x</span>

    </div>

  • 现在我们做的是style部分

①先给tooltip定义,这里只定义位置和展现方式。

 .tooltip {

            position: relative;

            display: inline-block;

        }

②我们先写的是tooltiptext的样式,这里将文本内容隐藏。

.tooltip .tooltiptext {

            visibility: hidden;

            width: 120px;

            background-color: black;

            color: pink;

            text-align: center;

            padding: 5px 0;

            border-radius: 6px;

            position: absolute;

            z-index: 1;

        }

③我们现在做的是将鼠标移动到“你好”上显示“我是小x”

 .tooltip:hover .tooltiptext {

            visibility: visible;

        }

④最后现在我们做小箭头

.tooltip .tooltiptext::after {

            content: " ";

            position: absolute;

            top: 50%;

            right: 100%;

            margin-top: -5px;

            border-width: 5px;

            border-style: solid;

            border-color: transparent black transparent transparent;

        }

这样一个简单的提示工具就做完了。

标签:提示,tooltip,color,小白,HTML,5px,border,transparent,tooltiptext
From: https://blog.csdn.net/m0_74164855/article/details/137466864

相关文章

  • jmeter生成一份html报告
    查看结果树生成文件.jtl后缀 选择创建报告注意配置文件可选择两个里的其中一个 空的文件夹生成一个html文件,点击可以查看报告内容 ......
  • 前端【VUE】02-vue指令【v-html 、v-show、 v-if 、v-else、v-on、v-bind、v-for、v-m
    Vue指令①v-html1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metahttp-equiv="X-UA-Compatible"content="IE=edge">6<metaname="view......
  • 小白鼠喝水
    题目大意有1000瓶水,其中有一瓶有毒,小白鼠只要尝一点带毒的水24小时内就会死亡,至少要多少只小白鼠才能在24小时内鉴别出哪瓶水有毒?思路讲解首先,给小白鼠编号,1,2,3,4,5,6,...,n!0000000001将第一瓶水给小鼠1喝0000000010将第二瓶水给小鼠2喝0000000011将第三瓶水给小鼠1、2喝......
  • #小白学Go-01# 学完Go指南感受,对比一下Go与其他语言
    本人以前是C/C++和Python选手,因为以后的工作需要用到Go,所以只好从零开始学习Go。本篇记录一下刚看完Go指南的感受,可能理解还不到位。总体感受学完Go指南给我最大的感觉就是,在变量定义方面很像Pascal,在函数、结构体、方法方面很像C,虽然没有C++中类的概念,但是通过方法可以实现类似......
  • HTML 照片墙
    提示:以下是本篇文章正文内容,下面案例可供参考这是HTML代码1<!DOCTYPEhtml>2<html>3<head>4<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>5<linkrel="stylesheet"type=&......
  • Linux基础 环境变量 别名 快捷键 历史命令 命令提示符
    1.##重启网卡报错[root@localhost~]#systemctlrestartnetwork 2.[root@localhost~]#[]:为了将命令提示符内容,扩进去root:当前登录系统的用户是谁@:分隔符localhost:当前服务器的主机名~:当前所在的目录(~当前登录用户的家目录)#:用户身份(#代表超级用户$代表普通用户) 3......
  • 编程小白必须知道的 15 个强大的 Python 单行代码
    这里写目录标题三元运算符为多个变量赋值交换变量的值交换列表中的元素替换列表中的元素列表推导式与三元运算结合使用列表推导式从列表创建子列表更改列表元素类型使用列表推导式输出文件列表平展多维列表字典推导式集合推导式将文件读入生成器使用Python-c命令的单......
  • 大语言模型LLM《提示词工程指南》学习笔记02
    文章目录大语言模型LLM《提示词工程指南》学习笔记02设计提示时需要记住的一些技巧零样本提示少样本提示链式思考(CoT)提示自我一致性生成知识提示大语言模型LLM《提示词工程指南》学习笔记02设计提示时需要记住的一些技巧指令您可以使用命令来指示模型执行各种简单......
  • 牛客小白月赛90----->D.小A的线段(easy version)
    1,思路:因为只有10个线段所以直接暴力枚举所有方案,看满足条件的方案有多少个,我这里用的是二进制枚举(dfs也可以),时间复杂度是:1024*1e5=1e8,这个时间复杂度是可以接受的。2.代码:#include<iostream>#include<algorithm>#include<cmath>#include<cstring>usingnamespacestd;......
  • 牛客小白月赛90题解
    A.小A的文化节#include<bits/stdc++.h>#defineintlonglong#defineendl"\n"usingnamespacestd;constintN=1e5+10,mod=1e9+7;intn,m,a[N];voidsolve(){ cin>>n>>m;for(inti=1;i<=n;i++)cin>>a[i];intres=0......