table中tr:hover无效 td:hover有效

最新推荐文章于 2024-07-11 15:17:27 发布
最新推荐文章于 2024-07-11 15:17:27 发布
阅读量8.2k 收藏 7
点赞数 6
分类专栏： 前端

给table设置鼠标滑动过的效果，发现tr:hover不起作用，但是改成td:hover就能起作用。

查资料后发现原因是td的背景色会覆盖tr的背景色，所以，解决方法是在tr:hover后加上样式：tr:hover td{background:none;}

 

southArbor
关注
专栏目录
JS获取Table中td值的方法
01-19
本文实例讲述了JS获取Table中td值的方法。分享给大家供大家参考。具体如下： 1、当要获取多行中的任意TD时，采用给每个TD设置一个共同的class 代码如下:<tr>   <td xss=removed id=”td2″>002</td>   <td xss=...
html table hover,表格列的hover状态与选中状态
weixin_39603469的博客
07-15 1500
表格列的hover状态与选中状态 - 练小习的前端技术笔记*{padding: 0;margin: 0;}.box{margin: 50px auto;width: 1000px;}.data-v{padding-left: 87px;border-left: #d3d3d3 1px solid;border-right:0 ;font-size: 14px;}.data-v table{bord...
tr标签上设置hover会被生效一瞬间就消失的问题
qq_57528761的博客
05-24 423
tr:hover { background-color: rgb(0, 225, 255); td { background: none; //如何不加会使tr的hover瞬间消失，被td的背景色覆盖 } }
ant Design table表格 hover行样式修改（也可解决hover修改后背景出现闪白的现象）
最新发布
qq_56042158的博客
07-11 358
1.找到table表格，点击tr（序号1），然后再单击hover（序号2），使背景色固定显示。2.点击第一个td（序号3），保持hover状态，找到默认背景色。4.将background改成你想要的颜色即可。
tr:hover变色的问题
简单快乐
11-03 6859
css tr 变色
tr标签使用hover的box-shadow效果不生效
weixin_34281537的博客
01-15 1386
先说问题： 　　这是大致的HTML结构 <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>Phone number</th> <th>Date</th> <th>Name&l...
tr:hover无效问题
Web前端开发
11-18 2379
做表格鼠标滑动变色，可以通过设置css中的tr:hover伪类属性达到效果。但是，有时会出现问题，td的背景色会覆盖tr的背景色。 .table_list tr:hover{background: #f0fafd;} .table_list tr:hover td{background: none;}
css table表格 rowspan跨行后设置hover效果
飞猪
07-19 1484
css table表格 rowspan跨行后设置hover效果 将 rowspan 的多个相关行，用一个tbody包起来，然后设置tbody:hover效果，自己写了个demo，直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
jq 隐藏table中的tr或td
02-23
本篇文章将详细讲解如何在不预先知道table ID的情况下，使用jQuery来隐藏table中的tr或td元素，以及涉及到的相关知识点。 首先，让我们了解HTML的table结构。一个基本的HTML表格由`<table>`标签开始，内部包含`<tr>...
CSS实现table td中文字的省略与显示(兼容IE与FF、Chrome)
12-13
在网页设计中，有时我们需要对表格（table）中的单元格（td）内容进行省略，以便在有限的空间内展示更多的信息。特别是在响应式设计中，适应不同设备屏幕大小显得尤为重要。CSS提供了优雅的方式来实现这一功能，同时...
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
01-19
废话不多说了，直接给大家贴代码了，具体代码如下所示： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <... <head>... <div class=table-responsive> <tabl
HTML中实现鼠标经停时整行（tr）变色
12-30
使用纯CSS实现在鼠标经过一个表格的某一... tr.change:hover { background-color:#00FF00 } </style> </head> <body> 鼠标经停变色 <table width=80% border=1 align=center> <tr class=change>
鼠标悬停在HTML-TABLE的某一行上 改变这一行的背景颜色
代码笔记
11-10 5376
主要CSS代码: #table1 tbody tr:hover { background-color: yellow; } 解释: ID为table1的table里的tboy里的tr的hover时,背景颜色为:yellow 黄色... 完整代码: <style> #table1 tbody tr:hover { background-color: yellow; } </style> <table i
修改table 在鼠标悬停hover时的颜色
m0_69681440的博客
04-08 174
style>important
element中table的hover不生效解决方法
weixin_43837268的博客
04-21 3951
.el-table--enable-row-hover .el-table__body tr:hover > td { background: #157283; color: #fff; }
一个table tr.hover的实例
热门推荐
zkz的专栏
05-17 1万+
<!--table { width:300px; border: 1px solid;}table tr:hover { background-color: #0180FE; color: #fff; cursor:hand;}-->table { width:300px; border: 1px s
CSS实现table表格鼠标滑过（悬浮）改变颜色
美奇软件开发工作室
10-15 4351
效果图： 其实很简单，就一行css代码： tbody tr:hover{ cursor:pointer; background-color: rgba(35,198,200,0.3); } 前面添加了tbody表示只作用到表格主体部分，标题不会改变颜色。
跨行tr hover效果
Shum1n的博客
06-08 819
bootStrap .table-hover样式 不满足需要。 直接在table 使用.table-hover样式,出现的效果不忍直视。 rowspan 的行与 下一行 tr 分开。 解决方法，把需要hover的行用同一个tbody包裹起来。简单来说，forEach遍历时一起加上tbody。 最后给tbody加上hover样式 tbody:hover{
td设置自动隐藏，hover事件触发全部显示，table列表不用担心信息太长导致界面不美观
Rosen's
12-16 779
table由于部分列信息较长，导致界面十分不友好，设置成固定布局的话，每列的占用宽度被均化了，可以把多点内容隐藏掉，但是也不是很美观，可以加div来调整，其他相关设置列属性好像也可以，没有尝试过。 通过给td加上以下属性，可以适应自定义的列宽度，多余的内容隐藏，鼠标移动到列上可以全部显示，比较合理。 table tr td{ max-width:500px; word-wrap: break-...
el-table fixed hover
08-29
el-table的fixed属性和hover效果可以通过以下样式实现： 当table没有加fixed属性时，可以使用以下样式来实现hover效果： .el-table__body .el-table__row.hover-row td { background-color: #fff !important; } 当table加了fixed属性时，可以使用以下样式来实现hover效果： .el-table tbody tr:hover > td { background: #fff !important; } 另外，如果想要更精确地设置hover的颜色，可以使用以下样式： .el-table tbody tr:hover > td { background-color: #颜色; } 或者 .el-table__body-wrapper tbody tr:hover > td { background-color: #颜色; } 以上是el-table fixed属性和hover效果的实现方法。希望对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [element 表格el-table改变hover背景颜色（fixed）](https://blog.csdn.net/weixin_63621456/article/details/125994643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题](https://blog.csdn.net/qq_47703624/article/details/114435077)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值