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

html+css 实现hover选择按钮

news 2026/2/9 14:09:57

前言：哈喽，大家好，今天给大家分享html+css 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕

目录

  • 一、效果
  • 二、原理解析
    • 1.这是一个，==hover出现2个选择按钮==的效果。每个按钮都是由4部分组成，1个div,1个div的伪元素before,2个button,如下图。
      • 1.1 div元素是==最外层==的，位置和代码。
      • 1.2 div:before是白底黑字，也是默认的==文字==，位置和代码。
      • 1.3 ==2个button==按钮的位置和代码。
      • 1.4 按钮==组成==关系。
    • 2.当按钮上有鼠标时，hover效果触发，最上层的div:before隐藏，运行==transition过渡动画==效果。
    • 3.具体的变换参数，直接==看代码==，可以一键复制，查看效果
  • 三、上代码，可以直接复制使用
    • 目录
    • html
    • css

一、效果

html+css 实现hover选择按钮效果

二、原理解析

1.这是一个，hover出现2个选择按钮的效果。每个按钮都是由4部分组成，1个div,1个div的伪元素before,2个button,如下图。

实现hover选择按钮组成

1.1 div元素是最外层的，位置和代码。

div位置
div元素代码

1.2 div:before是白底黑字，也是默认的文字，位置和代码。

div:before位置
div:before文字的代码

1.3 2个button按钮的位置和代码。

2个buttn的位置
左边按钮的代码
右边按钮的代码

1.4 按钮组成关系。

按钮组成关系图

2.当按钮上有鼠标时，hover效果触发，最上层的div:before隐藏，运行transition过渡动画效果。

在hover效果触发时的变化

/*当hover时*/
.butWrap:hover::before {opacity: 0;pointer-events: none;
}

3.具体的变换参数，直接看代码，可以一键复制，查看效果

三、上代码，可以直接复制使用

目录

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html+css  实现hover选择按钮</title><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container"><h1 style="text-align: center;color:#fff;margin-bottom: 50px;padding-top: 50px; text-shadow: 0 3px 3px #4c6ed3;">html+css 实现hover选择按钮</h1><div class="wrapper"><div class="butWrap"><button class="butLeft">必须</button><button class="butRight">一定</button></div><div class="butWrap"><button class="butLeft">必须</button><button class="butRight">一定</button></div><div class="butWrap"><button class="butLeft">必须</button><button class="butRight">一定</button></div><div class="butWrap"><button class="butLeft">必须</button><button class="butRight">一定</button></div></div>
</div></body>
</html>

css

* {margin: 0;padding: 0;box-sizing: border-box;
}:root {--btn-bg-color: #fff;--font-color-black: #000;--btn-bg-color-hover: #FF5833;
}.container {min-height: 100vh;background-color: #0e1538;
}.wrapper {display: flex;flex-direction: column;align-items: center;gap: 40px;
}.butWrap {font-size: 1.2rem;cursor: pointer;position: relative;display: flex;align-items: center;transition: 1s;overflow: hidden;
}.butWrap::before {content: '求点赞';display: flex;justify-content: center;align-items: center;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 10;background: #fff;transition: 0.2s;border-radius: 3px;font-size: 16px;
}.butWrap:nth-child(2)::before {content: '求关注';
}.butWrap:nth-child(3)::before {content: '求收藏';
}.butWrap:nth-child(4)::before {content: '求转发';
}.butWrap > button {width: 50%;padding: 10px 15px;border: 0px;color: white;font-size: 1rem;font-weight: 700;cursor: pointer;outline: none;
}.butLeft {background: rgb(217, 20, 20);border-radius: 5px 0px 0px 5px;
}.butRight {background: rgb(29, 161, 242);border-radius: 0px 5px 5px 0px;
}.butWrap > button:hover {filter: brightness(400%);
}
/*当hover时*/
.butWrap:hover::before {opacity: 0;pointer-events: none;
}

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕

整理不易，点赞关注宝码香车

更多专栏订阅推荐：
👍 html+css+js 绚丽效果
💕 vue
✈️ Electron
⭐️ js
📝 字符串
✍️ 时间对象（Date()）操作

相关文章：

html+css 实现hover选择按钮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽效果&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目…...

编程日记 2024/8/8 9:32:07

Python数据可视化利器：Matplotlib详解

目录 Matplotlib简介安装MatplotlibMatplotlib基本用法 简单绘图子图和布局图形定制 常见图表类型 折线图柱状图散点图直方图饼图 高级图表和功能 3D绘图热图极坐标图 交互和动画与其他库的集成 与Pandas集成与Seaborn集成 常见问题与解决方案总结 Matplotlib简介 Matplotli…...

编程日记 2024/8/8 9:31:06

2024 NVIDIA开发者社区夏令营环境配置指南(Win Mac)

2024 NVIDIA开发者社区夏令营环境配置指南(Win & Mac) 1 创建Python环境 首先需要安装Miniconda&#xff1a; 大家可以根据自己的网络情况从下面的地址下载&#xff1a; miniconda官网地址&#xff1a;https://docs.conda.io/en/latest/miniconda.html 清华大学镜像地…...

编程日记 2024/8/8 9:29:03

介绍rabbitMQ

RabbitMQ是一个开源的消息代理软件&#xff0c;实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c;主要用于在不同的应用程序之间进行异步通信。以下是关于RabbitMQ的详细介绍&#xff1a; 一、基本概念 消息中间件&#xff1a;RabbitMQ是一个消息中间件&#x…...

编程日记 2024/8/8 9:27:00

AI在医学领域：使用眼底图像和基线屈光数据来定量预测近视

关键词&#xff1a;深度学习、近视预测、早期干预、屈光数据 儿童近视已经成为一个全球性的重大健康议题。其发病率持续攀升&#xff0c;且有可能演变成严重且不可逆转的状况&#xff0c;这不仅对家庭幸福构成威胁&#xff0c;还带来巨大的经济负担。当前的研究着重指出&#x…...

编程日记 2024/8/8 9:24:56

VB.NET中如何利用WPF（Windows Presentation Foundation）进行图形界面开发

在VB.NET中&#xff0c;利用Windows Presentation Foundation (WPF) 进行图形界面开发是一个强大的选择&#xff0c;因为它提供了丰富的UI元素、动画、数据绑定以及样式和模板等高级功能。以下是在VB.NET项目中使用WPF进行图形界面开发的基本步骤&#xff1a; 1. 创建一个新的…...

编程日记 2024/8/8 9:21:53

Go语言标准库中的双向链表的基本用法

什么是二分查找区间&#xff1f; 什么是链表&#xff1f; 链表节点的代码实现&#xff1a; 链表的遍历&#xff1a; 链表如何插入元素&#xff1f; go语言标准库的链表&#xff1a; 练习代码&#xff1a; package mainimport ("container/list""fm…...

编程日记 2024/8/8 9:16:47

手机游戏录屏软件哪个好，3款软件搞定游戏录屏

在智能手机普及的今天&#xff0c;越来越多的人喜欢在手机上玩游戏&#xff0c;并希望能够录制游戏过程或者分享游戏技巧。然而&#xff0c;面对市面上众多的手机游戏录屏软件&#xff0c;很多人可能会陷入选择困难。究竟手机游戏录屏软件哪个好&#xff1f;在这篇文章中&#…...

编程日记 2024/8/8 9:13:43

【力扣】4.寻找两个正序数组的中位数

题目描述 给定两个大小分别为 m 和 n 的正序&#xff08;从小到大&#xff09;数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,3], nums2 [2] 输出&#xff1a;2.0…...

编程日记 2024/8/8 9:11:40

【C++】初识面向对象：类与对象详解

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性 本章将介绍C中一个重要的概念——类。通过类&#xff0c;我们可以类中定义成员变量和成员函数&#xff0c;实现模块化封装&#xff0c;从而构建更加抽象和复杂的工程。 &…...

编程日记 2024/8/8 9:10:40

知识图谱学习总结

1 知识图谱的介绍 知识图谱&#xff0c;是结构化的语义知识库&#xff0c;用于迅速描述物理世界中的概念及其相互关系&#xff0c;通过知识图谱能够将Web上的信息、数据以及链接关系聚集为知识&#xff0c;使信息资源更易于计算、理解以及评价&#xff0c;并能实现知识的快速响…...

编程日记 2024/8/8 9:09:39

2021-10-23 51单片机LED1-8按秒递增闪烁

缘由51单片机&#xff0c;八个LED灯按LED1亮1s灭1s,LED1亮2s 灭2s以此类推的方式亮灭-编程语言-CSDN问答 #include "REG52.h" sbit K1 P1^0; sbit K2 P1^1; sbit K3 P1^2; sbit K4 P1^3; sbit P1_0P2^0; sbit P1_1P2^1; sbit P1_2P2^2; sbit P1_3P2^3; sbit P1_…...

编程日记 2024/8/8 9:08:37

在Linux中宏观的看待线程

线程一旦被创建&#xff0c;几乎所有的资源都是被所有的线程共享的。线程也一定要有自己私有的资源&#xff0c;什么样的资源应该是线程私有的&#xff1f; 1.PCB属性私有 2.要有一定的私有上下文结构 3.每个线程都要有独立的栈结构 ps -aL ##1. Linux线程概念 ###什么是线程…...

编程日记 2024/8/8 9:07:36

提示libfakeroot.so或libfakeroot-sysv.so出错处理方法

在RK3588 Buildroot SDK里面&#xff0c;uboot和kernel使用的是prebuild目录下的交叉编译链&#xff0c;而buildroot和APP编译则使用Buildroot生成的交叉编译链来编译&#xff08;如&#xff1a;位于buildroot/output/rockchip_rk3588/host目录为交叉编译工具链目录&#xff09…...

编程日记 2024/8/8 9:06:35

【计算机网络】什么是socket编程？以及相关接口详解

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …...

编程日记 2024/8/8 9:05:33

LeetCode.19.删除链表的倒数第n个节点

题目描述&#xff1a; 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点 输入输出实例&#xff1a; 思路&#xff1a;这道题目我们可以用双指针来做&#xff0c;让first和second指针之间的距离为n1&#xff0c;然后我们first和second指针…...

编程日记 2024/8/8 9:02:29

vue-cesium

vue-cesium: Vue 3.x components for CesiumJS. cesium 文档中文版 ArcGisMapServerImageryProvider - Cesium Documentation all参考 https://juejin.cn/post/7258119652726341669 cesium官网 Cesium Sandcastle...

编程日记 2024/8/8 9:01:28

《npm 学习过程中遇到的诸多问题》

npm 开发 1.开发过程中难免会使用到npm ,进行安装第三方包 遇到的问题 match 报错&#xff1a;npm i报错npm ERR! Cannot read property match of undefined 可以尝试清除本地的package-log.json 文件&#xff0c;再试试...

编程日记 2024/8/8 9:00:25

CentOS 介绍

引出 Linux 系统内核与 Linux 发行套件系统的区别&#xff1f; Linux 系统内核指的是一个由 Linus Torvalds&#xff08;Linux之父&#xff0c;内核主要开发者&#xff09;负责维护&#xff0c;提供硬件抽象层、磁盘、文件系统控制及多任务功能的系统核心程序。 Linux 发行套…...

编程日记 2024/8/8 8:59:24

模拟面试题1

目录 一、JVM的内存结构&#xff1f; 二、类加载器分为哪几类&#xff1f; 三、讲一下双亲委派机制 为什么要有双亲委派机制&#xff1f; 那你知道有违反双亲委派的例子吗&#xff1f; 四、IO 有哪些类型&#xff1f; 五、Spring Boot启动机制 六、Spring Boot的可执行…...

编程日记 2024/8/8 8:53:17

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2026/2/8 4:37:03

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2026/2/3 22:50:06

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2026/1/20 22:45:38

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2026/1/27 4:58:14

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/12/3 3:22:43

uni-app学习笔记三十五--扩展组件的安装和使用

由于内置组件不能满足日常开发需要&#xff0c;uniapp官方也提供了众多的扩展组件供我们使用。由于不是内置组件&#xff0c;需要安装才能使用。 一、安装扩展插件 安装方法&#xff1a; 1.访问uniapp官方文档组件部分&#xff1a;组件使用的入门教程 | uni-app官网 点击左侧…...

编程新知 2026/2/6 5:51:39

高效的后台管理系统——可进行二次开发

随着互联网技术的迅猛发展&#xff0c;企业的数字化管理变得愈加重要。后台管理系统作为数据存储与业务管理的核心&#xff0c;成为了现代企业不可或缺的一部分。今天我们要介绍的是一款名为 若依后台管理框架 的系统&#xff0c;它不仅支持跨平台应用&#xff0c;还能提供丰富…...

编程新知 2026/2/4 15:23:03

【PX4飞控】mavros gps相关话题分析，经纬度海拔获取方法，卫星数锁定状态获取方法

使用 ROS1-Noetic 和 mavros v1.20.1&#xff0c; 携带经纬度海拔的话题主要有三个&#xff1a; /mavros/global_position/raw/fix/mavros/gpsstatus/gps1/raw/mavros/global_position/global 查看 mavros 源码&#xff0c;来分析他们的发布过程。发现前两个话题都对应了同一…...

编程新知 2026/2/7 2:24:22

RKNN开发环境搭建2-RKNN Model Zoo 环境搭建

目录 1.简介2.环境搭建2.1 启动 docker 环境2.2 安装依赖工具2.3 下载 RKNN Model Zoo2.4 RKNN模型转化2.5编译C++1.简介 RKNN Model Zoo基于 RKNPU SDK 工具链开发, 提供了目前主流算法的部署例程. 例程包含导出RKNN模型, 使用 Python API, CAPI 推理 RKNN 模型的流程.   本…...

编程新知 2026/1/26 18:57:39