CSS hover on a table row with the exception of some cells
Question
Based on my previous post I would like to add a 4th column, that contains only images. The hover should not effect this column. Because of the image is smaller, then the cell itself, it looks strange with 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. But the table in the code below has a different structure: only the columns, that have a special meaning, have a class attribute. In this case the 4th <td> of each row has the class rightTD .
I did the following modifications on the CSS:
.multidata tbody>tr:hover td:not(.rightTD) { background-color: #96c7ef;important; }
(Added :not(.rightTD) )
The HTML was extended with a new 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.
How can i disable the hover on 4th column?
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 answers
solution1
1 ACCPTED 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. 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.
.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>
solution2
0 2020-05-12 20:45:00
.multidata tbody>tr:hover td:not(:last-child) {
background-color:#96c7ef!important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.