CSS hover 在除某些單元格之外的表格行上
[英]CSS hover on a table row with the exception of some cells
問題描述
根據我之前的帖子，我想添加一個僅包含圖像的第 4 列。 hover 不應影響此列。 因為圖像比較小，那么單元格本身，用hover看起來很奇怪。 我在這里找到了類似的東西，但是為了使它起作用，我必須用 class 屬性標記每個<td> ，除了每行的第 4 個<td> 。 但是下面代碼中的表具有不同的結構：只有具有特殊含義的列具有 class 屬性。 在這種情況下，每行的第 4 個<td>具有 class rightTD 。
我對 CSS 做了以下修改：
.multidata tbody>tr:hover td:not(.rightTD) { background-color: #96c7ef;important; }
（添加:not(.rightTD) ）
HTML 擴展了新的 header：
<th style="width: 10%">Button</th>
並且兩個單元格具有相同的內容：
<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>
問題：第 4 列（標題除外）仍受 hover 影響。
如何禁用第 4 列的 hover？
下面是代碼：
.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
最好不要在 css 中盡可能不要使用!important ，之后覆蓋它會成為一個挑戰。 不是在<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;
}
如何僅在表格中的某些單元格上使用CSS懸停？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.