Highlighting Entire Row on Hover with Fixed Columns

tcbeaton

I have a table with fixed columns, I've set up CSS styles to highlight the rows on hover, but only the fixed columns highlight when I hover over them or the non-fixed columns when I hover over them.

Is it possible to have the entire row (fixed and non-fixed columns) highlight when I hover on any cell in the row?

Thanks.

Here's the CSS I'm using to highlight the rows (only "even" included for example):
[code]
tr.even:hover td,
#mtTable tr.even:hover td,
#mtTable tr.even:hover td.sorting_1 { background-color: #FFFF88;
border-top: 2px solid #FF0000;
border-bottom: 2px solid #FF0000; }
[/code]

The first line, "tr.even:hover td", provides the highlighting for the fixed columns, the other two, beginning with "#mtTable", provide the highlighting for the non-fixed columns.

allan

Currently it is not possible with pure CSS since the table gets broken into two parts - of :hover only deals with one. You'd need to use Javascript to do it. I'll try to write a demo sometimes, but if anyone else wants to have a bash, please do and post your code :-)

Allan

Pummra

[code]
$(document).on({
mouseenter: function () {
trIndex = $(this).index()+1;
$("table.dataTable").each(function(index) {
$(this).find("tr:eq("+trIndex+")").addClass("hover")
});
},
mouseleave: function () {
trIndex = $(this).index()+1;
$("table.dataTable").each(function(index) {
$(this).find("tr:eq("+trIndex+")").removeClass("hover")
});
}
}, ".dataTables_wrapper tr");
[/code]

I had a bash at writing some code to do this. I am not sure if it is the most efficient way of doing it, all I know is that it works for me. Hope it helps.

To use it you just need to include a hover class in your CSS to do define how you want the tr to display.

allan

Excellent - that looks great. Thanks for posting this.

Allan

tcbeaton

Pummra,

This worked perfectly... I just added an extra level to apply the class to the tag, since I was using cell specific styling (i.e., borders):

[code]
$(document).on({
mouseenter: function () {
trIndex = $(this).index()+1;
$("table.dataTable").each(function(index) {
$(this).find("tr:eq("+trIndex+")").each(function(index) {
$(this).find("td").addClass("hover");
});
});
},
mouseleave: function () {
trIndex = $(this).index()+1;
$("table.dataTable").each(function(index) {
$(this).find("tr:eq("+trIndex+")").each(function(index) {
$(this).find("td").removeClass("hover");
});
});
}
}, ".dataTables_wrapper tr");
[/code]

asdren

How can I apply this on my boostrap table where I currently use the table-hover class?
http://getbootstrap.com/2.3.2/base-css.html#tables

With my current table-hover class the highlight is split in two, the first highlight is on the columns that are on iLeftColumns and then the second highlight is on the other columns.

allan

You can't use the `:hover` pseudo class that Bootstrap uses - you have to explicitly add a new class `td.hover` (for example) to your CSS for the code suggested above to work.

Allan

marianopeck

Thanks guys for this thread. It worked for me. Maybe it would be nice to add this example in the FixedColumns page?

allan

Thanks for the suggestion - I'll certainly look at doing that! I need a better way of tying the fixed columns with the main table altogether!

Allan