Shekinah Budhai
Reputation: 97
How to highlight a table's row and column when hovering over it?
I would like to do the exact same thing as done in this example: http://jsfiddle.net/ThinkingStiff/rUhCa/.
However, when I try to change the background color of the table, the hover and highlight stops working.
Below you can see my code:
HTML
<table>
<tr>
<th></th>
<th class="col">50kg</th>
<th class="col">55kg</th>
<th class="col">60kg</th>
</tr>
<tr>
<th class="row">160cm</th>
<td>20</td>
<td>21</td>
<td>23</td>
</tr>
</table>
CSS
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th, .row, .col {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::before,
.row:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
Upvotes: 7
Views: 20932
Answers (3)
Victoria Le
Reputation: 940
Assuming this is something that you're looking for. You set z-index: -1 would hide the background highlighter when table has a background color as it has higher z-index value than negative values. But you really don't need them at all. You should use RGBA color - which specifies the opacity for a color to do the highlight works. Hope it helped!
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
background-color: tomato;
}
td, th {
padding: 10px;
position: relative;
}
tr:hover{
background-color: rgba(255, 255, 0, 0.5);
}
td:hover::after,th:hover::after {
background-color: rgba(255, 255, 0, 0.5);
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
}<table>
<tr>
<th></th>
<th>50kg</th>
<th>55kg</th>
<th>60kg</th>
<th>65kg</th>
<th>70kg</th>
</tr>
<tr>
<th class="row">160cm</th>
<td>20</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
<tr>
<th class="row">165cm</th>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>26</td>
</tr>
<tr>
<th class="row">170cm</th>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
</tr>
<tr>
<th class="row">175cm</th>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
</tr>
</table>
<script>
/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */
var headerUri = 'http://stackoverflow.com/q/848840/918414',
headerCaption = 'cols, colgroups and css :hover psuedoclass';
document.body.insertAdjacentHTML(
'afterBegin',
'<a href="' + headerUri + '" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'border: 1px solid black;'
+ 'border-radius: 2px;'
+ 'color: white;'
+ 'display: block;'
+ 'font: normal 15px/26px Helvetica, Verdana, Tahoma;'
+ 'height: 26px;'
+ 'left: 0px;'
+ 'opacity: 1;'
+ 'overflow: hidden;'
+ 'padding: 2px 8px;'
+ 'position: fixed;'
+ 'right: 0px;'
+ 'text-decoration: none;'
+ 'text-overflow: ellipsis;'
+ 'text-shadow: -1px -1px black;'
+ 'top: 0px;'
+ 'white-space: nowrap;'
+ 'z-index: 9999;'
+ '"><img '
+ 'style="'
+ 'display: block;'
+ 'float: left;'
+ 'margin-right: 8px;" '
+ 'src="http://thinkingstiff.com/images/stackoverflow.png" />'
+ headerCaption
+ '</a>'
);
document.body.insertAdjacentHTML(
'afterBegin',
'<a href="http://thinkingstiff.com" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'border: 1px solid black;'
+ 'border-radius: 2px;'
+ 'bottom: 0;'
+ 'color: white;'
+ 'display: block;'
+ 'font-family: Helvetica, Verdana, Tahoma;'
+ 'opacity: 1;'
+ 'padding: 4px 8px;'
+ 'position: fixed;'
+ 'right: 0;'
+ 'text-decoration: none;'
+ 'text-shadow: -1px -1px black;'
+ 'z-index: 999;'
+ '">thinkingstiff.com</a>'
);
document.head.insertAdjacentHTML( 'beforeEnd',
'<style>'
+ 'body { margin-top: 40px !important; }'
+ '</style>'
);
</script>Upvotes: 14
jacktrader
Reputation: 689
I tried some of the code to do Column Highlighting, but I kept running into issues because I was using "sticky" menus which kept on breaking when I tried to use one of the suggested methods. "overflow: clip" for the Table property resolved my problem, and this is the code I ended up using:
/* Column highlighting */
table {
overflow: clip;
}
tr:hover,
td:hover::before {
background-color: rgba(255, 255, 0, 0.25);
}
td:hover::before {
position: absolute;
left: 0;
top: -300vh;
height: 300vw;
width: 100%;
z-index: -1;
content: "";
}
Alternative:
/* Column highlighting */
table {
overflow: clip;
}
tr:hover,
td:hover::before {
background-color: rgba(255, 255, 0, 0.25);
border: solid 1px #FFFF00;
}
td:hover::before {
position: absolute;
left: 0;
top: -300vh;
height: 300vw;
width: 100%;
content: "";
}
P.S. I actually really like removing the "z-index: -1" from the "td:hover" because it highlights the entire row and column (including 'even' rows, which I think is more the desired effect). I'd suggest trying both and seeing which you like more!
I hope this helps someone.
Upvotes: 1
Stig
Reputation: 41
You can solve by adding pseudo elements and modifying your attached code.
table {
width:100%;
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
tr:nth-child(odd){
background-color: rgba(1, 1, 0, 0.2);
}
tr:nth-child(even){
background-color: rgba(200, 1, 200, 0.2);
}<table>
<tr>
<th></th>
<th>50kg</th>
<th>55kg</th>
<th>60kg</th>
<th>65kg</th>
<th>70kg</th>
</tr>
<tr>
<th class="row">160cm</th>
<td>20</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
<tr>
<th class="row">165cm</th>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>26</td>
</tr>
<tr>
<th class="row">170cm</th>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
</tr>
<tr>
<th class="row">175cm</th>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
</tr>
</table>
<script>
/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */
var headerUri = 'http://stackoverflow.com/q/848840/918414',
headerCaption = 'cols, colgroups and css :hover psuedoclass';
document.body.insertAdjacentHTML(
'afterBegin',
'<a href="' + headerUri + '" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'border: 1px solid black;'
+ 'border-radius: 2px;'
+ 'color: white;'
+ 'display: block;'
+ 'font: normal 15px/26px Helvetica, Verdana, Tahoma;'
+ 'height: 26px;'
+ 'left: 0px;'
+ 'opacity: 1;'
+ 'overflow: hidden;'
+ 'padding: 2px 8px;'
+ 'position: fixed;'
+ 'right: 0px;'
+ 'text-decoration: none;'
+ 'text-overflow: ellipsis;'
+ 'text-shadow: -1px -1px black;'
+ 'top: 0px;'
+ 'white-space: nowrap;'
+ 'z-index: 9999;'
+ '"><img '
+ 'style="'
+ 'display: block;'
+ 'float: left;'
+ 'margin-right: 8px;" '
+ 'src="http://thinkingstiff.com/images/stackoverflow.png" />'
+ headerCaption
+ '</a>'
);
document.body.insertAdjacentHTML(
'afterBegin',
'<a href="http://thinkingstiff.com" '
+ 'target="_top" '
+ 'onmouseover="this.style.opacity=\'.95\'" '
+ 'onmouseout="this.style.opacity=\'1\'" '
+ 'style="'
+ 'background-color: black;'
+ 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );'
+ 'border: 1px solid black;'
+ 'border-radius: 2px;'
+ 'bottom: 0;'
+ 'color: white;'
+ 'display: block;'
+ 'font-family: Helvetica, Verdana, Tahoma;'
+ 'opacity: 1;'
+ 'padding: 4px 8px;'
+ 'position: fixed;'
+ 'right: 0;'
+ 'text-decoration: none;'
+ 'text-shadow: -1px -1px black;'
+ 'z-index: 999;'
+ '">thinkingstiff.com</a>'
);
document.head.insertAdjacentHTML( 'beforeEnd',
'<style>'
+ 'body { margin-top: 40px !important; }'
+ '</style>'
);
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23915674-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>Upvotes: 3
Related Questions
- Is there a pure-CSS way to highlight a html table column on hover?
- How to highlight table row on hover using CSS only?
- How can I change the row and colum background-color on hover a table element?
- Highlight two table rows on hover with CSS
- CSS tables: changing background on hover, including alternative rows
- How can I set the background-color of every other row of a table AND highlight row on hover?
- How can a html table highlight columns by changing the border on hover?
- How to highlight the selected row in a table?
- Highlighting a table row on mouse hover
- How to highlight entire table cell on hover?