Rollover effect in long tables

Turbocapitalist · 01-11-2017, 08:35 AM

In some cases, it'd be easier to follow the contents of long tables if there were a rollover effect for the active row. It is still a good portion eye candy, though I think it does help with usability.

Below is an illustration of the effect with some arbitrary colors using the CSS that vBulletin uses.

Code:

div.KonaBody > table.tborder > tbody > tr:hover > td.alt1 {
        transition-timing-function: ease;
        background-color: #ccc;
}

div.KonaBody > table.tborder > tbody > tr:hover > td.alt2 {
        transition-timing-function: ease;
        background-color: #aac;
}

It's sad, typographic markup rather than nice, structural markup because of the sad choices vBulletin uses for element classes. But it does identify just the desired elements.

dugan · 01-11-2017, 08:39 AM

Where do we have long tables?

Turbocapitalist · 01-11-2017, 08:42 AM

Quote:

Originally Posted by dugan

Where do we have long tables?

I was thinking specifically of these:

There may be others.

rtmistler · 01-12-2017, 06:48 AM

Do you have screenshots showing a mockup example versus code?

I know what the cited screens appear like, however I'm unclear what you are proposing.

Turbocapitalist · 01-12-2017, 07:05 AM

Yes, but it does not seem possible to upload images without activating scripts. I think that will lead to another request in the LQ Suggestions & Feedback subforum.

Below are the steps needed to make your own sample:

Code:

dir=$(mktemp -d) && cd $dir
wget -k -p 'https://www.linuxquestions.org/questions/lqsearch.php?do=getnew&daysprune=7'
cd ./www.linuxquestions.org/questions/
sed -i -e 's|</head>|<link rel="stylesheet" href="./index.css" media="screen, projection" type="text/css" /></head>|';
cat <<EOF > index.css
div.KonaBody > table.tborder > tbody > tr:hover > td.alt1 {
        transition-timing-function: ease;
        background-color: #ccc;
}
div.KonaBody > table.tborder > tbody > tr:hover > td.alt2 {
        transition-timing-function: ease;
        background-color: #aac;
}
EOF
chromium-browser  'lqsearch.php?do=getnew&daysprune=7'