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

css 点击后改变样式

news 来源：原创 2025/7/15 21:51:04

背景：

期望实现效果：鼠标点击之后，保持选中样式。

实现思路：在css样式中，:active 是一种伪类，用于表示用户当前正在与被选定的元素进行交互。当用户点击或按住鼠标时，元素将被激活，此时 :active 伪类将生效。一旦鼠标按键释放或触摸结束，:active 状态将消失。

:focus伪类的样式在元素获得焦点后会保持显示，直到失去焦点。

最终思路：

通过 CSS 来保持 :active 样式。这可以通过使用 :focus + :active 选择器结合 tabindex 属性来实现。

效果展示：

核心代码：

tabindex绑定一个值，可以是字符串，也可以是数字类型。主要是做区分不同的点击元素

//css                    .menu-item {margin: 0 20px;.text {color: #FFFFFF;}}.menu-item:active {background-color: pink;.text {color: #FFEEA8 !important;}}.menu-item:focus {background-color: rgb(192, 255, 197);.text {color: #FFEEA8 !important;}}

发现只要这串代码也能实现效果：

        .menu-item:focus {border: none;border-bottom: 2px solid;color: #FFEEA8;border-image: linear-gradient(90deg, rgba(19, 69, 117, 0), rgba(255, 238, 168, 1), rgba(19, 69, 117, 0)) 2 2;.text {color: #FFEEA8 !important;}}

官网链接：点击跳转

有兴趣的欢迎补充、评论。。。

css 点击后改变样式

背景： 期望实现效果：鼠标点击之后，保持选中样式。实现思路：在css样式中，:active 是一种伪类，用于表示用户当前正在与被选定的元素进行交互。当用户点击或按住鼠标时，元素将被激活，此…...

编程日记 2025/7/15 21:51:04

AI 在模仿历史语言方面面临挑战：大型语言模型在生成历史风格文本时的困境与研究进展

概述在当今数字化时代，人工智能（AI）技术在诸多领域展现出了强大的能力，但在处理历史语言这一特定任务时，却遭遇了不小的挑战。美国和加拿大的研究人员通过合作发现，像 ChatGPT 这样的大型语言模型&#x…...

编程日记 2025/7/15 21:15:24

C++.Windows图形

Windows图形 1. 基础知识1.1 Windows图形编程基础1.2 GDI与GDI1.3 窗口消息处理2.1 注册窗口类2.2 创建窗口2.3 显示窗口3.1 创建按钮3.2 按钮消息处理4.1 设置窗口透明度4.2 透明窗口示例5.1 使用区域创建异形窗口5.2 异形窗口示例6.1 GDI抗锯齿设置6.2 抗锯齿绘图示例7.1 Dir…...

编程日记 2025/7/15 21:41:14

【Vue3】使用vite创建Vue3工程、Vue3基本语法讲解

一、什么是Vite Vite是新一代前端构建工具，官网地址：Vite中文网，vite的优势如下： 轻量快速的热重载（HMR），能实现极速的服务启动对TypeScript、JSX、CSS等支持开箱即用真正的按需编译&#xff…...

编程日记 2025/7/1 4:43:12

专题二：二叉树的深度优先搜索

以leetcode2331题为例题目分析： 以第一个示例为例算法原理分析： 从宏观角度，也就是我的算法之回溯的第一篇我们发现我们在研究示例的时候，必须从下往上推也就是我在研究一个结点是true还是false的时候，必须…...

编程日记 2025/7/15 21:41:14

Termius ssh连接服务器 vim打开的文件无法复制问题

你的问题是： • 在 Termius (macOS) SSH 连接到 VMware Ubuntu，使用 vim 打开 .cpp 文件时，可以复制文本； • 但在 Windows 10 上 SSH 到 VMware 的 Red Hat 6.4 时，复制操作无效。 ⸻ 🎯 初步分析复制…...

编程日记 2025/7/15 21:04:06

搭建大数据学习的平台

一、基础环境准备 1. 硬件配置物理机：建议 16GB 内存以上，500GB 硬盘，多核 CPU虚拟机：至少 3 台（1 主 2 从），每台 4GB 内存，50GB 硬盘 2. 操作系统 Ubuntu 20.04 LTS 或 CentOS…...

编程日记 2025/7/14 8:02:18

Matlab 模糊控制节水洗衣机模型

1、内容简介 Matlab 232-模糊控制节水洗衣机模型可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略...

编程日记 2025/7/15 21:13:23

如何找正常运行虚拟机

1.新建虚拟机。Linux centos7，给虚拟机改个名字不要放在c盘 2.安装操作系统。cd/dvd->2009.iso 启动虚拟机...

编程日记 2025/7/12 10:40:33

python二手书交易管理系统

目录技术栈介绍具体实现截图系统设计研究方法：设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理，难度适中&#xf…...

编程日记 2025/7/7 4:48:25

使用本地部署的 LLaMA 3 模型进行中文对话生成

以下程序调用本地部署的 LLaMA3 模型进行多轮对话生成，通过 Hugging Face Transformers API 加载、预处理、生成并输出最终回答。程序用的是 Chat 模型格式（如 LLaMA3 Instruct 模型），遵循 ChatML 模板，并使用 apply…...

编程日记 2025/7/1 3:09:00

C++编程练习，认识面向对象权限，如何进行封装

#include <iostream> #include <string> using namespace std; /* 银行的账户是一个模板，是一个类，有存款人信息和账户额度，而具体的存款人视为一个对象， 一个对象不能私自修改账户额度，需要通过一个操作流…...

编程日记 2025/7/15 21:11:16

A Survey of Learning from Rewards：从训练到应用的全面剖析

A Survey of Learning from Rewards：从训练到应用的全面剖析你知道大语言模型（LLMs）如何通过奖励学习变得更智能吗？这篇论文将带你深入探索。从克服预训练局限的新范式，到训练、推理各阶段的策略，再到广泛…...

编程日记 2025/7/15 21:00:09

电脑端音乐播放器推荐：提升你的听歌体验！

在快节奏的职场环境中，许多上班族都喜欢用音乐为工作时光增添色彩。今天要分享的这款音乐工具，或许能为你的办公时光带来意想不到的惊喜。一、软件介绍-澎湃澎湃音乐看似是个普通的播放器，实则藏着强大的资源整合能力。左侧功能栏清晰陈列着…...

编程日记 2025/7/15 20:57:22

小刚说C语言刷题—1149 - 回文数个数

1.题目描述一个正整数，正读和反读都相同的数为回文数。例如 22， 131， 2442 ， 37073， 66，…… 所有 11位数都是回文数。给出一个正整数 n （ 1≤n≤10000 ），求出 1,2…...

编程日记 2025/7/15 21:21:29

基于SpringBoot的博客系统测试报告

一、编写目的本报告为博客系统测试报告，本项目模拟了csdn，实现了包括了用户登录，发布博客文章，查看博客等功能。二、项目背景博客系统采用前后端分离的方法来实现，同时使用了数据库来存储相关的数据&#xff0c…...

编程日记 2025/7/15 21:08:26

Koa知识框架

一、核心概念 1. 基本特点由 Express 原班人马开发的下一代 Node.js Web 框架基于中间件的洋葱圈模型轻量级核心（仅约 600 行代码） 完全使用 async/await 异步流程控制没有内置任何中间件，高度可定制 2. 核心对象 Application (Ko…...

编程日记 2025/6/29 1:44:07

React Native踩坑实录：解决NativeBase Radio组件在Android上的兼容性问题

React Native踩坑实录：解决NativeBase Radio组件在Android上的兼容性问题问题背景在最近的React Native项目开发中，我们的应用在iOS设备上运行良好，但当部署到Android设备时，进入语言设置和隐私设置页面后应用崩溃。我们遇到了…...

编程日记 2025/7/13 11:19:26

RCE联系

过滤绕过空格 ● 进制绕过题目练习数字rce 使用$0执行bash，<<<将后面的字符串传递给左边的命令。例如： <?php highlight_file(__FILE__); function waf($cmd) { $whiteList [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, \\, \, $, <]; $cmd_ch…...

编程日记 2025/7/3 20:34:48

区块链大纲笔记

中心化出现的原因是由于网络的形成（不然就孤立了，这显然不符合现实，如，社会，计算机网路），接着由于网络中结点能力一般不对等同时为了便于管理等一系列问题，导致中心化网络的出现。&a…...

编程日记 2025/6/29 4:06:14

SQL：JOIN 进阶

目录 JOIN 是什么？ 🔹OUTER JOIN（外连接） 外连接的分类外连接与内连接的区别 🔹USING 子句语法结构和 ON 的对比 📘USING 的内部逻辑 🧩 多个字段的 USING USING 的 SELECT 特性&a…...

编程日记 2025/7/15 21:41:12

SATA—Link层状态机

一、概述 Link层的状态机大致可以分为五类： 链路层空闲状态机通信异常处理状态机链路层发送状态机链路层接收状态机链路层电源管理下的状态机二、链路层空闲状态机链路层空闲状态机共包含两个状态L_IDLE、L_SyncEscape，每个状态下的处理机制与条状…...

编程日记 2025/7/15 21:47:46

12.2.2 allocator类

allocator类将分配内存空间、调用构造函数、调用析构函数、释放内存空间这4部分操作分开，全部交给程序员来执行，不像new和delete #include <iostream> #include <string>int main() {const int n 10;std::allocator<std::string> al…...

编程日记 2025/7/15 20:54:42

Qwen：Qwen3，R1 在 Text2SQL 效果评估

【对比模型】 Qwen3 235B-A22B（2350亿总参数，220亿激活参数），32B，30B-A3B；QwQ 32B（推理模型）DeepSeek-R1 671B（满血版）（推理模型） 1&a…...

编程日记 2025/7/9 15:25:40

Egg.js知识框架

一、Egg.js 核心概念 1. Egg.js 简介基于 Koa 的企业级 Node.js 框架（阿里开源） 约定优于配置（Convention over Configuration） 插件化架构，内置多进程管理、日志、安全等能力适合中大型企业应用，提供…...

编程日记 2025/7/15 21:51:03

latex控制表格宽度，不要超出页面

字体控制控制表格的字体，一般使用 footnotesize ，neurips 使用的就是这个大小列宽距控制默认列宽距是 6pt ，可以人工调节成为 5pt，不影响字体，比较不影响可读性 % 对于 table* 环境, [htbp] 通常比 [h] 或 [h!]…...

编程日记 2025/7/15 21:38:11

Linux进程管理

程序、进程、服务程序 program 安装包，未运行的代码，APP 存放在磁盘上进程 process 已运行程序、命令、服务，一个程序可以运行多个进程、父进程启动子进程运行在内存中服务 service 一直运行的进程，也叫做守护进程&…...

编程日记 2025/7/15 21:03:16

[springboot]SSM日期数据转换易见问题

日期数据的形式有多种，如2025-05-12 14:46:50、2025.05.12 14:46，可以没有年只有月日...等等。在SSM项目中，前后端传递日期数据时往往需要统一格式，不然会报数据类型转换异常。在controller层中用实体类实例对象接收前端服务器传…...

编程日记 2025/6/29 8:39:56

数字IC后端培训教程之数字后端项目典型案例分析

今天给大家分享下最近小编帮助学员解决的几个经典数字IC后端项目问题。希望能够对大家的学习和工作有所帮助。数字IC后端项目典型问题之后端实战项目问题记录（2025.04.24） 数字IC后端设计实现培训教程（整理版） Q1: 老师好&…...

编程日记 2025/6/29 4:23:17

数字ic后端设计从入门到精通4（含fusion compiler, tcl教学）CMOS VLSI Design

Layout Design Rules 一、什么是 Layout Design Rules？ 布局设计规则是一套用于指导芯片物理设计的几何约束条件，确保设计可以在特定制造工艺下被正确制造。这些规则通常由代工厂（foundry）提供，规定了最小线宽、间距、…...

编程日记 2025/6/29 4:10:37

服务器带宽基础知识

服务器带宽基础知识详解一、带宽的定义与基本概念服务器带宽（Bandwidth）是指服务器与互联网之间在单位时间内传输数据的能力，通常以 Mbps（兆比特每秒） 或 Gbps（吉比特每秒） 为单位衡量。它决…...

编程日记 2025/6/29 2:22:44

算法-单调栈

739. 每日温度 - 力扣（LeetCode） 原理：739. 每日温度 - 力扣（LeetCode） class Solution { public:vector<int> dailyTemperatures(vector<int>& temperatures) {stack<int>sta;int ntemperatu…...

编程日记 2025/7/10 23:41:15

大核极坐标码

大核极性码（ℓ>2）的SC解码操作与原始极性码相似。迭代地，解码方程可以表示为： 这是给定信道输出的路径的概率。虽然这些操作类似于传统的极坐标码，但迭代计算概率的复杂性相对于ℓ 作为，这使得它对于非…...

编程日记 2025/6/29 4:09:08

如何避免 JavaScript 中常见的闭包陷阱？

文章目录 1. 引言2. 什么是闭包？3. 常见的闭包陷阱及解决方案3.1 循环中的闭包陷阱3.2 内存泄漏3.3 意外的全局变量3.4 React 中的闭包陷阱 4. 总结 1. 引言闭包（Closure）是 JavaScript 中一个强大而常用的特性，它允许函数访问其…...

编程日记 2025/6/29 4:20:53

免费多线程下载工具

先放下载链接：https://tool.nineya.com/s/1ir25buco Free Download Manager，简称“FDM”，是一款多线程下载工具，支持多端使用哦，像Windows、mac Os、Linux、浏览器插件以及安卓端都涵盖在内，这些版本这里都…...

编程日记 2025/7/15 20:04:26

Aware和InitializingBean接口以及@Autowired注解失效分析

Aware 接口用于注入一些与容器相关信息，例如： a. BeanNameAware 注入 Bean 的名字 b. BeanFactoryAware 注入 BeanFactory 容器 c. ApplicationContextAware 注入 ApplicationContext 容器 d. EmbeddedValueResolverAware 注入解析器&a…...

编程日记 2025/6/29 3:03:49

【NextPilot日志移植】日志写入流程

📝 文件后端日志写入流程详解当后端选择文件时，日志写入过程主要涉及 LogWriter 和 LogWriterFile 类的协作。以下是详细的日志写入过程解释及涉及的代码： 1. LogWriter 类初始化在 LogWriter 类的构造函数中，如果配置的后端…...

编程日记 2025/7/12 23:51:55

OpenCV直方图与直方图均衡化

一、图像直方图基础 1. 什么是图像直方图？ 图像直方图是图像处理中最基本且重要的统计工具之一，它用图形化的方式表示图像中像素强度的分布情况。对于数字图像，直方图描述了每个可能的像素强度值（0-255）在图像中出现…...

编程日记 2025/7/13 10:21:32

Babel进阶：如何自定义插件？

Babel 是一个非常流行的 JavaScript 编译器，下面我们将从零到一编写一个 babel 箭头函数语法转换插件，掌握 babel 插件设计思路与编写规范，需求很简单就是将箭头函数转换为普通函数。 const test ()>{console.log("Hello World!&qu…...

编程日记 2025/6/29 3:25:46

C++中类中const知识应用详解

下面将从**const 成员**、const 成员函数、const 对象、mutable、constexpr 等方面，逐一详解 C 类中常见的 const 用法及注意事项，并配合示例。一、const 数据成员必须在初始化列表中初始化 class A {const int x; // const 成员 public:A(int v) :…...

编程日记 2025/7/15 9:11:12

LeetCode 513 找树左下角的值 LeetCode 112 路径总和 LeetCode106 从中序与后序遍历序列构造二叉树

LeetCode 513 找树左下角的值迭代法——层序遍历思路：对树进行层序遍历操作，层序遍历完后，输出树最后一层的第一个节点。 # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, val0, leftNone, r…...

编程日记 2025/7/5 22:22:16

电脑端实用软件合集：土拨鼠+Rufus+实时网速监控工具

朋友们好，我是李师傅！今天带来三款让人直呼"真香"的电脑工具，它们就像武林高手各怀绝技，保证让你工作效率翻倍！ 1Tuboshu（电脑） 最近发现一款神奇工具——Tuboshu（发音类…...

编程日记 2025/6/29 1:35:56

杨校老师项目之基于SSM与JSP的鲜花销售系统-【成品设计含文档】

基于SSMJSP鲜花商城系统随着电子商务的快速发展，鲜花在线销售已成为一种重要的消费模式。本文设计并实现了一个基于JSP技术的鲜花销售管理系统，采用B/S架构，使用SSM框架进行开发，并结合Maven进行项目依赖管理。系统分为前台用户模…...

编程日记 2025/6/29 1:36:10

#!/bin/bash set -euo pipefail# 基础环境配置 setenforce 0 >/dev/null 2>&1 || true sed -i "s/SELINUXenforcing/SELINUXdisabled/" /etc/selinux/config systemctl stop firewalld >/dev/null 2>&1 || true systemctl disable firewalld >…...

编程日记 2025/6/29 3:55:05

STM32实现循环队列

1. 循环队列的核心结构设计数据结构定义：通常使用结构体封装队列的指针、长度及缓冲区。例如： typedef struct {u16 Head; // 队头指针u16 Tail; // 队尾指针u16 Length; // 当前队列长度u8 Rsv_DAT[50]; // 缓冲区数组 } ringbuff_t; 其中…...

编程日记 2025/6/29 1:41:54

matlab simulink双边反激式变压器锂离子电池均衡系统，双目标均衡策略，仿真模型，提高均衡速度38%

双边反激式变压器锂离子电池均衡系统，双目标均衡策略锂离子电池均衡系统综述引言电池均衡管理系统(Battery Balancing Management System, BBMS)是电池管理系统(BMS)的核心组成部分，主要用于解决电池组中单体电池间的不一致性问题。随着电动汽车、储能…...

编程日记 2025/6/29 1:39:37

数据库笔记(1)

文章目录 1.SQL的通用语法2.四类SQL语句2.1DDL语句2.2.1数据库操作2.1.2表操作 2.2DML语句2.2.1添加数据(INSERT)2.2.2修改数据(UPDATE)2.2.3删除数据(DELETE) 2.3DQL语句2.3.1DQL语法2.3.2基本查询2.3.3条件查询2.3.4分组查询2.3.5排序查询2.3.6分页查询2.3.7DQL语句的执行顺序…...

编程日记 2025/6/29 1:35:49