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

CSS - 鼠标移入整行高亮显示，适用于会员套餐各参数对比页面（display: table，div 转表格形式）

news 2025/12/16 7:26:12

效果图

可根据基础示例和进阶示例，复制进行改造样式。

如下图所示，本文提供 2 个示例。

在这里插入图片描述

基础示例

找个 HTML 页面，一键复制运行。

<body><h1 style="text-align: center;">基础示例</h1><section class="content"><div class="row"><div class="cell">张三</div><div class="cell">李四</div><div class="cell">王五</div></div><div class="row"><div class="cell">张三</div><div class="cell">李四</div><div class="cell">王五</div></div></section>
</body><style>
body {background: #eeeeee;
}
/* 根节点 */
.content {display: table;/*display: table时padding会失效*/width: 800px;margin: 0 auto;background: #fff;
}
/* 每行 */
.row {display: table-row;/*display: table-row时margin、padding同时失效*//* background: red; */text-align: center;
}
.row:hover {/* 这里写鼠标移入时的样式 */background: #fff;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);font-weight: bold;
}
/* 每列 */
.cell {display: table-cell;/*display: table-cell时margin会失效*/padding: 15px;
}
</style>

进阶示例

找个 HTML 页面，一键复制运行。

<body><h1 style="text-align: center;">进阶示例</h1><section class="content"><!-- 头部自定义内容 --><div class="row-hidden"><div class="cell"><div class="header"><h3>普通会员</h3><button class="button">立即开通</button><div style="height: 20px;"></div></div></div><div class="cell"><div class="header"><h3>中级会员</h3><button class="button">立即开通</button><div style="height: 20px;"></div></div></div><div class="cell"><div class="header"><h3>高级会员</h3><button class="button">立即开通</button><div style="height: 20px;"></div></div></div></div><!-- END --><!-- 激活高亮区域 --><div class="row"><div class="cell"><div class="item">[普通会员] 这是第一行</div></div><div class="cell"><div class="item">[中级会员] 这是第一行</div></div><div class="cell"><div class="item">[高级会员] 这是第一行</div></div></div><div class="row"><div class="cell"><div class="item">[普通会员] 这是第二行</div></div><div class="cell"><div class="item">[中级会员] 这是第二行</div></div><div class="cell"><div class="item">[高级会员] 这是第二行</div></div></div><!-- END --><!-- 底部自定义内容 --><div class="row-hidden"><div class="cell"><div class="bottom"><div style="height: 10px;"></div><h3>底部内容</h3></div></div><div class="cell"><div class="bottom"><div style="height: 10px;"></div><h3>底部内容</h3></div></div><div class="cell"><div class="bottom"><div style="height: 10px;"></div><h3>底部内容</h3></div></div></div><!-- END --></section>
</body><style>
body {background: #eeeeee;
}
/* 根节点 */
.content {display: table;/*display: table时padding会失效*/width: 1300px;margin: 0 auto;border-collapse: collapse;
}
/* 每行 */
.row {display: table-row;/*display: table-row时margin、padding同时失效*/text-align: center;
}
.row-hidden {display: table-row;/*display: table-row时margin、padding同时失效*/text-align: center;
}
.row:hover {/* 这里写鼠标移入时的样式 */font-weight: bold;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);cursor: pointer;color: red;
}
/* 每列 */
.cell {display: table-cell;/*display: table-cell时margin会失效*//* 这行代码是为了侧边留空隙使用,同背景色一致造成的假象 */border-right: 10px solid #eeeeee;
}/* 额外样式 */
.item {/* padding */background: #fff;text-align: left;padding-left: 30px;padding-right: 30px;/* padding-left: 35px; */padding-bottom: 10px;padding-top: 10px;
}
.header {background: #fff;padding: 20px;
}
.button {width: 90%;height: 30px;
}
.bottom {background: #fff;padding: 20px;
}
</style>

CSS - 鼠标移入整行高亮显示，适用于会员套餐各参数对比页面（display: table，div 转表格形式）

效果图可根据基础示例和进阶示例，复制进行改造样式。如下图所示，本文提供 2 个示例。基础示例找个 HTML 页面，一键复制运行。 <body><h1 style"text-align: center;">基础示例</h1><section class"…...

编程日记 2023/9/16 19:40:18

无涯教程-JavaScript - ATAN2函数

描述 The ATAN2 function returns the arctangent, or inverse tangent, of the specified x- and ycoordinates, in radians, between -π/2 and π/2. 语法 ATAN2 (x_num, y_num)争论 Argument描述Required/OptionalX_numThe x-coordinate of the point.RequiredY_numThe…...

编程日记 2023/9/16 19:39:17

Tomcat 下部署 jFinal

1、检查web.xml 配置，在 tomcat 下部署需要检查 web.xml 是否存在，并且要确保配置正确，配置格式如下。 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns:xsi"http://www.w3.org/2001/XMLSchema-i…...

编程日记 2023/9/16 19:36:14

【Spatial-Temporal Action Localization（二）】论文阅读2017年

文章目录 1. ActionVLAD: Learning spatio-temporal aggregation for action classification [code](https://github.com/rohitgirdhar/ActionVLAD/)[](https://github.com/rohitgirdhar/ActionVLAD/)摘要和结论引言：针对痛点和贡献相关工作模型框架思考不足之处 2.…...

编程日记 2023/9/16 19:35:13

二维码智慧门牌管理系统：数据现势性，满足应用需求的根本保证

文章目录前言一、项目背景二、数据的现势性三、系统的优势四、应用前景前言在当今信息化社会，数据的重要性日益凸显，尤其是数据的现势性，它决定着服务的质量和满足应用需求的能力。近日，一个创新的二维码智慧门牌管理系统项目…...

编程日记 2023/9/16 19:34:12

BF算法（C++）简单讲解

BF算法匹配过程易理解，若匹配，子串和主串都往下移一位。不匹配时，主串回溯至本次匹配开始下标的下一位。例：图中第三趟匹配时，主串到第七位时与子串不匹配，这次匹配主串是从第三位开始的，所以下…...

编程日记 2023/9/16 19:32:09

JVM 虚拟机 ----＞ Java 类加载机制

文章目录 JVM 虚拟机 ----> Java 类加载机制一、概述二、类的生命周期1、类加载过程（Loading）（1）加载（2）验证（3）准备（4）解析（5）初始…...

编程日记 2023/9/16 19:30:07

《protobuf》基础语法2

文章目录枚举类型ANY 类型oneof 类型map 类型改进通讯录实例枚举类型 protobuf里有枚举类型，定义如下 enum PhoneType {string home_addr 0;string work_addr 1; }同message一样，可分为嵌套定义，文件内定义，文件外定义。不…...

编程日记 2023/9/16 19:28:05

利用 SOAR 加快事件响应并加强网络安全

随着攻击面的扩大和攻击变得越来越复杂，与网络攻击者的斗争重担落在了安全运营中心 （SOC） 身上。SOC 可以通过利用安全编排、自动化和响应 （SOAR） 平台来加强组织的安全态势。这一系列兼容的以安全为中心的软件可加快事…...

编程日记 2023/9/16 19:25:01

uni-app:通过ECharts实现数据可视化-如何引入项目

效果引入文件位置代码 <template><view id"myChart"></view> </template> <script> import echarts from /static/js/echarts.js // 引入文件 export default {mounted() {// 初始化EChartsconst myChart echarts.init(document…...

编程日记 2023/9/16 19:24:00

string 模拟与用法

string 用法 string string 模拟 #pragma once #include <assert.h> #include <string.h> #include <iostream>namespace sjy {class string{public://迭代器相关typedef char* iterator;typedef const char* const_iterator;iterator begin(){return _st…...

编程日记 2023/9/16 19:20:58

[NLP] LLM---＜训练中文LLama2(一)＞训练一个中文LLama2的步骤

一数据集【Awesome-Chinese-LLM中文数据集】【awesome-instruction-dataset】【awesome-instruction-datasets】【LLaMA-Efficient-Tuning-数据集】Wiki中文百科（25w词条）wikipedia-cn-20230720-filteredBaiduBaiKe（563w词条） …...

编程日记 2023/9/16 19:18:56

华为云云耀云服务器L实例使用教学 | 利用华为云服务器搭建--＞基于Spring Boot+WebSocket+WebRtc实现的多人自习室

文章目录 1. 购买华为云服务器L2. 在华为云服务器上搭建项目前期准备工作1. 更换登录密码2. 安全组配置 3. 在服务器上运行自己的项目 1. 购买华为云服务器L 在有优惠券的情况下，来到华为云这个网址下面，链接为：https://www.huaweicloud.com…...

编程日记 2023/9/16 19:17:55

Postman应用——接口请求（Get和Post请求）

文章目录新增请求接口请求Get接口请求Post 这里只讲用的比较多的Get和Post请求方式，也可以遵循restful api接口规范，使用其他请求方式。 GET（SELECT）：从服务器取出资源（一项或多项）POST&#…...

编程日记 2023/9/16 19:16:54

k8s pod概念、分类及策略

目录一.pod相关概念 ２.Kubrenetes集群中Pod两种使用方式 ３.pause容器的Pod中的所有容器共享的资源 ４.kubernetes中的pause容器主要为每个容器提供功能： ６.Pod分为两类： 二.Pod容器的分类 1.基础容器…...

编程日记 2023/9/16 19:15:52

C++系列-左移运算符重载

左移运算符重载左移运算符的应用左移运算符的重载左移运算符的应用左移运算符，左移第一个操作数的位，第二个操作数决定要移动的位置左移运算符还可以用于输出调试，cout << “Hello” << endl; 左移运算符的重载左移运算符…...

编程日记 2023/9/16 19:12:50

【Vue】vue中v-if的用法

v-if是Vue.js中常用的条件渲染指令，根据表达式的值来动态控制元素的显示或隐藏。具体的使用方法如下： 1.基本语法 <div v-if"condition"> </div>其中，v-if后面跟着一个表达式condition&#x…...

编程日记 2023/9/16 19:11:49

企业架构LNMP学习笔记54

企业架构NoSQL数据库之MongoDB。学习目标和内容： 1）能够简单描述mongoDB的使用特点： 2）能够安装配置启动MongoDB； 3）能够使用命令行客户端简单操作MongoDB； 4）能够实现基本的数…...

编程日记 2023/9/16 19:08:46

C【函数】

1.常用API 1.strcpy：#include<string.h> char * strcpy ( char * destination, const char * source );int main(){char arr1[] "bit";char arr2[20] "###########";// bit\0########strcpy(arr2, arr1);printf("…...

编程日记 2023/9/16 19:06:44

【简单教程】利用Net2FTP构建免费个人网盘，实现便捷的文件管理

文章目录 1.前言2. Net2FTP网站搭建2.1. Net2FTP下载和安装2.2. Net2FTP网页测试 3. cpolar内网穿透3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言文件传输可以说是互联网最主要的应用之一，特别是智能设备的大面积使用，无论是个人…...

编程日记 2023/9/16 19:03:41

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...

编程新知 2025/12/16 3:57:54

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...

编程新知 2025/12/14 3:12:01

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。然而，互联网…...

编程新知 2025/8/18 9:54:31

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/10/11 3:56:08

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...

编程新知 2025/11/25 4:57:19

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2025/12/9 10:21:27

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

【 java 虚拟机知识第一篇】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍内存模型主要分…...

编程新知 2025/12/15 19:07:10

效果图

基础示例

进阶示例

相关文章：