HTML表格中鼠标停留与鼠标移出事件颜色自动改变的实现

最新推荐文章于 2025-05-02 15:48:25 发布

原创最新推荐文章于 2025-05-02 15:48:25 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种简单的实现鼠标悬停时表格行背景色变化的方法。通过在HTML表格标签中加入onmouseover和onmouseout事件，可以轻松地为用户提供更好的交互体验。

其实这个功能实现起来很简单，看个简单的例子吧。

EX:

<table>
	<tr onMouseover="style.backgroundColor= '#DBEAF8';";onMouseout="style.backgroundColor= '#FFFFFF';";>
		<td>
			例子
		</td>
		<td>
			例子
		</td>
	</tr>
	<tr>
		<td>
			例子
		</td>
		<td>
			例子
		</td>
	</tr>
	<tr></tr>
</table>

这样当鼠标移动到表格中的第一行，颜色就会改变，移出之后，颜色又将发生改变。就这么简单！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Heulizeyang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

（28）表格隔行变色，并且鼠标移入高亮显示，鼠标移出显示原来的颜色

虚心求学_一点一滴

07-19

3649

基本思想：采用表格中某一行的

QTableWidget实现鼠标移动整行颜色变化

热门推荐

QT练手小程序

11-27

1万+

QTableWidget实现鼠标移动整行颜色变化困扰了本人很久的一个问题就是QTableWidget的qss样式只能提供每个item：hover时的样式变化，而我们想要实现的是一整行的样式变化，在不断的坚持下今天终于解决了，今天写下来方便大家查阅，希望能够帮到大家。 *主要的方法就是新建一个新类继承自QTableWidget，我这里的类名为SWTableWidget，然后在头文件和源文件中填写代码，

参与评论您还未登录，请先登录后发表或查看评论

随着鼠标的移动变换表格背景色

辛佳雨的专栏

07-16

2356

function mOvr(src) {if (!src.contains(event.fromElement)) {src.style.cursor = hand; src.bgColor = "#FDEAB5";}}function mOut(src) {if (!src.contains(event.toElement)) {src.style.cursor = default; s

HTML之鼠标移动事件

一岁一枯荣的博客

09-27

8199

鼠标事件： <meta charset="utf-8" /> div{ width: 200px; height: 200px; border: 1px solid #000000; f

HTML元素设置鼠标事件

zhouxukun123的专栏

06-07

4915

HTML元素设置鼠标事件

HTML一种鼠标移动列变色效果

aicoder的专栏

02-24

2177

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">*{font-size:12px; list-style:none; padding:0; margin:0}.TmpMouseOver{padding:5px;border:1px solid #dddddd;border-

html鼠标移入随机换颜色,鼠标移入改变原来数组的颜色.html

weixin_42224303的博客

06-08

309

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">课堂练习body,ul,li{padding:0;margin:0;}li{list-style:none;display: inline-block;width: 50px;heigh...

layui实现鼠标移动到单元格上显示数据的方法

10-16

这通常通过在一个表格中添加工具提示（tooltip）功能来实现，以达到鼠标移动到单元格上时，会有相应的提示显示出来，这能提高用户体验。具体操作方法如下： 1. 引入Layui的JavaScript和CSS文件，确保Layui框架已...

js判断鼠标位置是否在某个div中的方法

10-22

在使用onmouseout事件时，有时会遇到一个问题：当鼠标从div移出到div中的其他内容（例如下拉菜单或者内嵌的可交互元素）时，onmouseout事件也会被触发，这可能导致一些不期望的行为，比如div意外被删除。为了解决这...

repeater隔行换色与鼠标停留在上面达到变色效果

10-27

总结一下，实现Repeater隔行换色与鼠标停留变色效果主要分为两步： 1. 在Repeater的ItemTemplate中，通过服务器端表达式判断行的索引，动态设置行的背景色，实现隔行换色。 2. 使用JavaScript的事件监听，分别在`...

html单个单元格颜色,鼠标滑过表格内单个单元格的背景变色特效

weixin_39849070的博客

06-20

623

很多例子做的是鼠标隔行变色，现在要做的是鼠标滑过表格内的每个单元格变色，而不是整行变色。阿里西西web开发网为大家整理了这篇鼠标滑过表格内单个单元格的背景变色特效，如果这篇文章在您的工作或学习中有帮助，欢迎常回来看看哦，更多精彩的教程请访问我们的主页,以下是教程浏览：脚本代码(For Alixixi.com)如下:阿里西西 js.alixixi.com 特效演示中心td.tdCurr {backg...

控制鼠标移动时的颜色变化

lihushiwoa的专栏

12-15

1295

css代码如下：（定义改变前后的颜色） .over { background-color : #EFEFEF;color:#FFFFFF;} .out { background-color: #ffffff; color: #000000;} 针对HTML标签的对应事件来控制样式的变动： onMouseOver ="this.className='over'" onMouseOut

如何设置当鼠标停留的时候改表格背景色变成另外一种色

lhf0301的专栏

07-03

538

onmouseover="this.style.backgroundColor=#ff0000"

根据HTML和CSS相关知识，使鼠标经过 ul的li变色

weixin_52908348的博客

12-16

1677

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>sda...

【HTML】—鼠标移入或移出表格，表格变色

王萌萌

11-18

1万+

本文积累了几种鼠标移入或者移出html的table表格时，表格背景色变化的几种方法。一、利用样式CSS表达式在样式里写表达式expression，实现鼠标经过表格行上变色，但在firefox里无效果。完整代码如下：在样式里写表达式expression，实现鼠标经过表格行上变色 .tbDatalist {

鼠标指针经过表格时背景变换颜色

Ma9ran的博客

04-21

1293

上述代码中，第三行代码把获取到的tbody里面所有的行保存在变量trs中。第7~9行代码为trs中的每一个元素绑定onmouseover鼠标指针经过事件，当鼠标指针进入的时候给当前tr项的类名设置为bg。第11~13行代码给trs[i]绑定onmouseout鼠标指针进入的时候给当前tr项的类名设置为空，去掉当前的背景颜色。当表格中单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景颜色，使表格内容显得清晰和一目了然，更容易阅读。下图实现鼠标指针经过时背景变色的效果，具体代码如下。

html设置鼠标移动变色,table行随鼠标移动变色示例

weixin_42308335的博客

06-04

2155

1、设计表格工号姓名年龄性别2014010101张峰56男2014010102李玉42女2014010103王珂36男2014010104张钰31女2014010105朱顾44男2014010106胡雨35女2014010107刘希30男2014010108孙宇45女2014010109谷雨33男2014010110科宇45女2、设计样式.html_body .body_div{width: 13...

实现网页交互动效：鼠标悬停改变内容

最新发布

weixin_42515842的博客

05-02

1440

用户体验（User Experience, 简称UX）是用户在使用产品或服务过程中建立起来的一种主观感受。它不仅包括用户对产品功能的满意度，还包括用户对产品外观、界面布局、交互流程等方面的整体感知。用户体验的目标是使产品易于使用、有效并且令人愉悦，从而满足用户的需求，增加用户满意度，促进用户忠诚度。在这个部分，我们将深入分析一个具体的网页悬停效果案例，以展示各种技术如何综合运用以达到理想的设计效果。

HTML+CSS实现鼠标移动到某位置文本变色/显现效果

欢迎来到超级予的博客 Welcome to SuperAyu's Blog

09-28

1万+

借助hover属性直接在text标签处修改即可。

vue3中如何让element puls的table表格数据循环滚动鼠标移入暂停

01-21

### Vue3 Element Plus Table 数据循环滚动并鼠标移入暂停为了实现在 Vue3 中使用 Element Plus 的 `el-table` 组件来创建具有自动滚动功能的数据表，并且当鼠标悬停时能够停止滚动的效果，可以按照如下方式构建： #### 创建定时器控制表格滚动通过 JavaScript 定时器定期更新表格的滚动位置。每当新数据被添加到表格中时，确保调用此逻辑使表格保持在最新状态。 ```javascript import { onMounted, ref } from 'vue'; export default { setup() { const tableListRef = ref(null); function startAutoScroll(intervalTime) { let intervalId; function autoScrollToBottom() { if (tableListRef.value && tableListRef.value.$refs.bodyWrapper) { const scrollContainer = tableListRef.value.$refs.bodyWrapper; scrollContainer.scrollTop = scrollContainer.scrollHeight; } } return () => { clearInterval(intervalId); // 清除之前的计时器 intervalId = setInterval(autoScrollTo Bottom, intervalTime); }; } return { tableListRef, startAutoScroll }; }, }; ``` #### 添加事件监听处理鼠标的进入和离开利用 `mouseenter` 和 `mouseleave` 事件来管理滚动行为，在用户指针位于表格内部时不执行自动滚动操作；一旦指针移出，则恢复默认的行为模式。 ```html <template> <div @mouseenter="pauseScroll()" @mouseleave="resumeScroll()">  <el-table :data="tableData" height="250px" ref="tableListRef"> ... </el-table> </div> </template> <script lang="ts"> // ... 上述导入语句和其他函数定义 ... setup() { // ... 其他变量声明... let isPaused = false; function pauseScroll() { isPaused = true; } function resumeScroll() { isPaused = false; if (!isPaused) { startAutoScroll(1000)(); } } onMounted(() => { startAutoScroll(1000)(); }); return { //... 返回其他属性... pauseScroll, resumeScroll }; } </script> ``` 上述代码实现了基本的需求：初始化页面加载完成后启动每秒一次向下的自动滚动动作[^1]；而当用户的光标停留在表格区域内时则中断这一过程直至其再次移动至外部区域为止[^2]。