3

I have some table, based on divs. When table row is hovered, i want to add borders to the top and bottom of it. But in spite of box-sizing: border-box, my block becomes 2 pixels bigger. Row can't have fixed height.

Here is example: https://jsfiddle.net/j4nwdju6/

I can't just add invisible or transparent borders, because it will spawn whitespaces between rows.

Efog
  • 1,155
  • 1
  • 15
  • 33

4 Answers4

8

You can offset this by adjusting the top & bottom margins on the hovered state:

JS fiddle

.row:hover {
    background: yellow;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin: -1px 0;
}
Derek Story
  • 9,518
  • 1
  • 24
  • 34
2

You may add a transparent border in .row like this

.row {    
display: flex;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}

This will not affect the height of div on hover.

UPDATE

To remove white space b/w rows add margin-top:-2px . Check this fiddle.

CodeRomeos
  • 2,428
  • 1
  • 10
  • 20
  • As i said in my question, `I can't just add invisible or transparent borders, because it will spawn whitespaces between rows.`. – Efog Sep 13 '15 at 19:22
1

Add border to your rows so that it wont jump while hovering

.row {    
    display: flex;
    border:1px solid white;
}

Updated fiddle : https://jsfiddle.net/j4nwdju6/1/

Shahil M
  • 3,836
  • 4
  • 25
  • 44
1

A really simple hack would be to add margin-top: -2px; to the :hover styles, so that the position doesn't change: JSFiddle.

Callan Heard
  • 727
  • 1
  • 8
  • 18
  • Yeah, but now text in rows is moving when hovered. I can do something like this: https://jsfiddle.net/j4nwdju6/4/ but it will be really dirty hack. – Efog Sep 13 '15 at 19:24
  • @dwreck's answer is correct: adjusting it to `margin: -1 0;` will solve that problem :) – Callan Heard Sep 13 '15 at 19:25