Html,css: Change a row's border colow on hover

Question

I am using DataTables and i am trying to change the row's top and bottom border to red on row hover. Following didn't change the color.

table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
    background-color: rgba(209, 231, 255, 0.5); 
    border-bottom: 1px solid red;
    border-top: 1px solid red;
}

Anyone knows how to properly do this ? jsfiddle: http://jsfiddle.net/d1zqsayh/

What does your html code look like? Please post it and make a jsfiddle. — i alarmed alien, Oct 05 '14 at 14:47
Please don't use jsfiddle in your work, a new feature called "Stack Overflow Snippets" has been released. — Alexander Craggs, Oct 05 '14 at 15:25

Shomz · Accepted Answer · 2014-10-05T15:21:45.047

2

You can do something like this:

table.dataTable tbody tr td{
    border-bottom: 1px solid transparent;
}

table.dataTable tbody tr:hover td {
    border-top: red 1px solid;
    border-bottom: red 1px solid;
}

See it here: http://jsfiddle.net/d1zqsayh/21/

edited Oct 05 '14 at 15:21

answered Oct 05 '14 at 15:04

Shomz

37,421
4
57
85

if i use `table.dataTable tbody tr td{ border-top: 1px solid transparent; border-bottom: 1px solid transparent; }` my old borders are gone , and if i don't, my rows move strangely – rez Oct 05 '14 at 15:16
Ah, sorry, use just the border-bottom there and both top and bottom for the hover. http://jsfiddle.net/d1zqsayh/21/ – Shomz Oct 05 '14 at 15:21
http://jsfiddle.net/d1zqsayh/22/ check this out. i only changed the color `1px solid rgb(192, 220, 255);` – rez Oct 05 '14 at 15:43
do you see what i mean with double border? it appears on the bottom border only – rez Oct 05 '14 at 15:56
if you find something let me know... cause i literally tried everything i could think of... – rez Oct 05 '14 at 16:11
Sorry, I was out. Anyway, this is a standard thing - the doubling comes from the bottom border of the top element touching the top border of the bottom element, so instead of a 1px border, you have two 1px lines touching, creating a 2px border. – Shomz Oct 05 '14 at 18:00
http://grooveshark.com/#!/album/Halo+LP/5904939 how does this website has the border normal ? – rez Oct 05 '14 at 18:45
They are using the top margin -1px, so the two borders from my previous comment overlap. – Shomz Oct 05 '14 at 19:07
where should i add `top margin -1px` ? – rez Oct 05 '14 at 19:09
I don't think it's going to be that easy because you're using tables (which should be used just for the tabular data), the site you shown me uses regular divs to build the layout so all they need to do is to set that margin rule on their row divs, but I doubt it can work just as easy on the `tr` elements without breaking the table. – Shomz Oct 05 '14 at 19:13
why would it be hard when there is a fully editable .css file ? i dont get it.. :S this is DataTables too, very famous plugin – rez Oct 05 '14 at 19:16
Try to do it then. **Tables are not for building layout**, there are tons of topics about that. Table elements don't respond to margins, and if you set them to be inline-blocks or something, they might break in certain browser (maybe all). http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Shomz Oct 05 '14 at 19:22
there has to be some way of removing the double border , i dont understand what building layout means – rez Oct 05 '14 at 19:25
http://jsfiddle.net/d1zqsayh/28/ , i am so close to doing it with divs , check the first 17 rows . am i close ? do you see what i am missing ? – rez Oct 05 '14 at 20:13
I think you're now farther than where you were - now each cell gets the bottom margin on hover, and see what happens when you hover the cells in the first column. Like I said, the table elements don't play well with margins. If you wish to stick with tables, perhaps the easist would be to change only the top border (which you already have in a non-hover states) and the row background. Otherwise, you'll just going to torture yourself. – Shomz Oct 05 '14 at 20:28

score 1 · Answer 2 · answered Oct 05 '14 at 15:04

You can't set a border on a tr, so you need to set it on the td elements.

First, set a default state with "invisible" borders -- this rule will apply to tables with the classes dataTable and hover:

.dataTable.hover td {
    border: 1px solid inherit;
}

Now specify red top and bottom borders when the row is hovered:

.dataTable.hover tr:hover td {
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

JSFiddle

In general, it is best not to specify too many selectors when setting css rules. Your selectors are very specific, and could be replaced by shorter statements, e.g.

.dataTable tr:hover td {
    background-color: rgba(209, 231, 255, 0.5); 
    border-bottom: 1px solid red;
    border-top: 1px solid red;
}

instead of table.dataTable tbody tr.even:hover td, etc.

Because the border is being added to the elements. One of the earlier style declarations is overriding the border declaration `.dataTable.hover td` and making only the top border appear. As I said, it is best not to specify too many selectors when setting rules, because you can accidentally make a declaration very specific, which then makes it very difficult to override without using something like `! important`. — i alarmed alien, Oct 06 '14 at 08:24

Jelle Keizer · Answer 3 · 2014-10-05T15:17:22.497

0

You cant set a border to a TR try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <style>


    .redrow td:hover{
    border-bottom: 1px solid red;
    border-top: 1px solid red;
    }
 </style>

 </HEAD>

 <BODY>
  <TABLE>
  <TR class="redrow">
    <TD>dsfsdfs</TD>
  </TR>
  </TABLE>
 </BODY>
</HTML>

edited Oct 05 '14 at 15:17

answered Oct 05 '14 at 14:52

Jelle Keizer

723
5
9

That would change only one cell's border. – JJJ Oct 05 '14 at 14:53
i forgot to add the td try again now :) – Jelle Keizer Oct 05 '14 at 14:53
2

It would still change only one cell's border. – JJJ Oct 05 '14 at 14:54
Sorry you didnt post any html so i didnt knew you where using multiple cells. Post your html please. – Jelle Keizer Oct 05 '14 at 15:00
The OP said "row". Also your HTML isn't valid: ` – Spencer Wieczorek Oct 05 '14 at 15:15
1

There is no border on a row in html and are you seriously whining about a missing > a the the end of the sample, how are you helping out here ? – Jelle Keizer Oct 05 '14 at 15:18

score 0 · Answer 4 · answered Oct 05 '14 at 15:17

0

It is possible with the border-collapse attribute:

table, th, td {
    border-collapse: collapse;
}

Full code: http://jsfiddle.net/hkmgk3uf/

answered Oct 05 '14 at 15:17

bigmaster

1

Html,css: Change a row's border colow on hover

4 Answers4