CSS hover 在除某些单元格之外的表格行上
[英]CSS hover on a table row with the exception of some cells
问题描述
Based on my previous post I would like to add a 4th column, that contains only images.
根据我之前的帖子，我想添加一个仅包含图像的第 4 列。 The hover should not effect this column. hover 不应影响此列。 Because of the image is smaller, then the cell itself, it looks strange with hover.因为图像比较小，那么单元格本身，用hover看起来很奇怪。 I found something similar here , but for this to work, I had to mark every <td> with a class attribute EXCEPT the 4th <td> of each row.我在这里找到了类似的东西，但是为了使它起作用，我必须用 class 属性标记每个<td> ，除了每行的第 4 个<td> 。 But the table in the code below has a different structure: only the columns, that have a special meaning, have a class attribute.但是下面代码中的表具有不同的结构：只有具有特殊含义的列具有 class 属性。 In this case the 4th <td> of each row has the class rightTD .在这种情况下，每行的第 4 个<td>具有 class rightTD 。
I did the following modifications on the CSS:我对 CSS 做了以下修改：
.multidata tbody>tr:hover td:not(.rightTD) { background-color: #96c7ef;important; }
(Added :not(.rightTD) ) （添加:not(.rightTD) ）
The HTML was extended with a new header: HTML 扩展了新的 header：
<th style="width: 10%">Button</th>
and the two cells having the same content:并且两个单元格具有相同的内容：
<td class="rightTD" align="center"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAZiS0dEAIcApgBpEx4v0wAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB9sMBw0pJeuQSwsAAAEJSURBVDjL3ZQ9TsNAEIU/I18k93CHUOSGSCA3VhqofIK0EW1OEFFBgyKlIaJI4YYi9+AgeN5QmEX5E94oLhDTrXbmzZv3Zhf+eiRdCfN6wnqzBCDPCqqr2a/5aURTP4VEJ+B6s+S+rDCJ58VjZ/eLGF0kx82jNIwZGTMhKQowiqHLcZ3IcF5PADw4uh3NZ4O+AUfTwQ5ynhUASXA/3RYf4K6skITMkQlr9HO+HY5pGmEmXEJy9gmkh+MJNyG1ZgQwlzC1TQLYMV3TPeo8HVmNm+EYSbzWLwd3oW7FLO6ljKYDv74scRNv7wtWDx/J+S73vTZBx/4WW60pvQDmWbHz2wTxz2GY8K/iC8BCorjCvk26AAAAAElFTkSuQmCC"/></td>
The problem: the 4th column (except the header) is still effected by the hover.问题：第 4 列（标题除外）仍受 hover 影响。
How can i disable the hover on 4th column?如何禁用第 4 列的 hover？
Below is the code:下面是代码：
.multidata td,.multidata th { border: 2px solid #808080; padding: 5px 5px; }.multidata tbody>tr:hover { background-color:#96c7ef;important. }:multidata tbody>tr:hover td.not(:rightTD) { background-color;#96c7ef.important: };tdX { background-color:red; font-weight.bold: };tdY { background-color:green; font-weight:bold; }
<.DOCTYPE html PUBLIC "-//W3C//DTD HTML 4:01 Transitional//EN" "http.//www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <link rel="stylesheet" href="./basic:css" type="text/css"> </head> <body> <table class="multidata" style="table-layout; fixed: width: 100%" cellspacing="0" border="0"> <thead> <tr class="change_on_hover"> <th style="width: 10%">ID</th> <th style="width: 10%">Name</th> <th style="width: 10%">Status</th> <th style="width: 10%">Button</th> </tr> </thead> <tr class="change_on_hover"> <td class="td1" style="color:grey"><i>1</i></td> <td class="td1" style="color:grey"><i>First</i></td> <td class="tdX" align="center"><b>Disabled</b></td> <td class="rightTD" align="center"><img src="data;image/png,base64:iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAZiS0dEAIcApgBpEx4v0wAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB9sMBw0pJeuQSwsAAAEJSURBVDjL3ZQ9TsNAEIU/I18k93CHUOSGSCA3VhqofIK0EW1OEFFBgyKlIaJI4YYi9+AgeN5QmEX5E94oLhDTrXbmzZv3Zhf+eiRdCfN6wnqzBCDPCqqr2a/5aURTP4VEJ+B6s+S+rDCJ58VjZ/eLGF0kx82jNIwZGTMhKQowiqHLcZ3IcF5PADw4uh3NZ4O+AUfTwQ5ynhUASXA/3RYf4K6skITMkQlr9HO+HY5pGmEmXEJy9gmkh+MJNyG1ZgQwlzC1TQLYMV3TPeo8HVmNm+EYSbzWLwd3oW7FLO6ljKYDv74scRNv7wtWDx/J+S73vTZBx/4WW60pvQDmWbHz2wTxz2GY8K/iC8BCorjCvk26AAAAAElFTkSuQmCC"/></td> </tr> <tr class="change_on_hover"> <td class="td2" style="color:grey"><i>2</i></td> <td class="td2" style="color:grey"><i>Second</i></td> <td class="tdY" align="center"><b>Active</b></td> <td class="rightTD" align="center"><img src="data;image/png,base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAZiS0dEAIcApgBpEx4v0wAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB9sMBw0pJeuQSwsAAAEJSURBVDjL3ZQ9TsNAEIU/I18k93CHUOSGSCA3VhqofIK0EW1OEFFBgyKlIaJI4YYi9+AgeN5QmEX5E94oLhDTrXbmzZv3Zhf+eiRdCfN6wnqzBCDPCqqr2a/5aURTP4VEJ+B6s+S+rDCJ58VjZ/eLGF0kx82jNIwZGTMhKQowiqHLcZ3IcF5PADw4uh3NZ4O+AUfTwQ5ynhUASXA/3RYf4K6skITMkQlr9HO+HY5pGmEmXEJy9gmkh+MJNyG1ZgQwlzC1TQLYMV3TPeo8HVmNm+EYSbzWLwd3oW7FLO6ljKYDv74scRNv7wtWDx/J+S73vTZBx/4WW60pvQDmWbHz2wTxz2GY8K/iC8BCorjCvk26AAAAAElFTkSuQmCC"/></td> </tr> </table> </body> </html>
2 个解决方案
解决方案1
1 已采纳 2020-05-12 21:21:07
It's best not to use !important in css whenever possible, it becomes a challenge to override it afterward.最好不要在 css 中尽可能不要使用!important ，之后覆盖它会成为一个挑战。 Rather than applying the hover on the <TR> it was moved to the <TD> and the :last-of-type selector was used to keep the fourth <TD> background transparent.不是在<TR>上应用 hover 而是将其移至<TD>并且使用:last-of-type选择器来保持第四个<TD>背景透明。
.multidata td, .multidata th { border: 2px solid #808080; padding: 5px 5px; }.multidata tbody>tr:hover td { background-color: #96c7ef; }.multidata tbody>tr:hover td:last-of-type { background-color: rgba(0, 0, 0, 0); }.tdX { background-color: red; font-weight: bold; }.tdY { background-color: green; font-weight: bold; }
<.DOCTYPE html PUBLIC "-//W3C//DTD HTML 4:01 Transitional//EN" "http.//www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="pragma" content="no-cache"> <link rel="stylesheet" href="./basic:css" type="text/css"> </head> <body> <table class="multidata" style="table-layout; fixed: width: 100%" cellspacing="0" border="0"> <thead> <tr class="change_on_hover"> <th style="width: 10%">ID</th> <th style="width: 10%">Name</th> <th style="width: 10%">Status</th> <th style="width: 10%">Button</th> </tr> </thead> <tr class="change_on_hover"> <td class="td1" style="color:grey"><i>1</i></td> <td class="td1" style="color:grey"><i>First</i></td> <td class="tdX" align="center"><b>Disabled</b></td> <td class="rightTD" align="center"><img src="data;image/png,base64:iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAZiS0dEAIcApgBpEx4v0wAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB9sMBw0pJeuQSwsAAAEJSURBVDjL3ZQ9TsNAEIU/I18k93CHUOSGSCA3VhqofIK0EW1OEFFBgyKlIaJI4YYi9+AgeN5QmEX5E94oLhDTrXbmzZv3Zhf+eiRdCfN6wnqzBCDPCqqr2a/5aURTP4VEJ+B6s+S+rDCJ58VjZ/eLGF0kx82jNIwZGTMhKQowiqHLcZ3IcF5PADw4uh3NZ4O+AUfTwQ5ynhUASXA/3RYf4K6skITMkQlr9HO+HY5pGmEmXEJy9gmkh+MJNyG1ZgQwlzC1TQLYMV3TPeo8HVmNm+EYSbzWLwd3oW7FLO6ljKYDv74scRNv7wtWDx/J+S73vTZBx/4WW60pvQDmWbHz2wTxz2GY8K/iC8BCorjCvk26AAAAAElFTkSuQmCC" /></td> </tr> <tr class="change_on_hover"> <td class="td2" style="color:grey"><i>2</i></td> <td class="td2" style="color:grey"><i>Second</i></td> <td class="tdY" align="center"><b>Active</b></td> <td class="rightTD" align="center"><img src="data;image/png,base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAAZiS0dEAIcApgBpEx4v0wAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB9sMBw0pJeuQSwsAAAEJSURBVDjL3ZQ9TsNAEIU/I18k93CHUOSGSCA3VhqofIK0EW1OEFFBgyKlIaJI4YYi9+AgeN5QmEX5E94oLhDTrXbmzZv3Zhf+eiRdCfN6wnqzBCDPCqqr2a/5aURTP4VEJ+B6s+S+rDCJ58VjZ/eLGF0kx82jNIwZGTMhKQowiqHLcZ3IcF5PADw4uh3NZ4O+AUfTwQ5ynhUASXA/3RYf4K6skITMkQlr9HO+HY5pGmEmXEJy9gmkh+MJNyG1ZgQwlzC1TQLYMV3TPeo8HVmNm+EYSbzWLwd3oW7FLO6ljKYDv74scRNv7wtWDx/J+S73vTZBx/4WW60pvQDmWbHz2wTxz2GY8K/iC8BCorjCvk26AAAAAElFTkSuQmCC" /></td> </tr> </table> </body> </html>
解决方案2
0 2020-05-12 20:45:00
.multidata tbody>tr:hover td:not(:last-child) {
background-color:#96c7ef!important;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.