How to create a CSS hover; over the li tag with border, flicked?

Question

I want to apply selected li a border, but seems hovering have a problem of flickering. Tried box-sizing still can't solve it.

li {
  background: red;
}

li:hover {
  border: 1px solid blue;
  box-sizing: border-box;
}

Am I missing something?

https://jsfiddle.net/wf0r2c5q/1/

Dupe of https://stackoverflow.com/questions/8625812/css-hover-border-makes-inline-elements-adjust-slightly and https://stackoverflow.com/questions/9612758/add-a-css-border-on-hover-without-moving-the-element and https://stackoverflow.com/questions/5578606/css-link-element-jumps-on-hover and https://stackoverflow.com/questions/556153/inline-elements-shifting-when-made-bold-on-hover — j08691, Feb 14 '18 at 03:47

score 1 · Answer 1 · answered Feb 14 '18 at 03:47

1

Add a border: 1px solid transparent to the li state.

li {
  background: red;
  border: 1px solid transparent;
}

It is flickering because a border changes the layout of the element.

answered Feb 14 '18 at 03:47

Steve Harrison

103,209
15
83
71

I want to apply border for selected li, setting this means I can't apply border anymore. – Sharon Chai Feb 14 '18 at 04:30

Bhuwan · Accepted Answer · 2018-02-14T04:55:14.877

Initially set the border-color to transparent and on :hover state set border-color to your choice

Stack Snippet

li {
  background: red;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

li:hover {
  border-color: blue;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

...or another solution is use box-shadow inset instead of border

li {
  background: red;
}

li:hover {
  box-shadow: 0px 1px 0 0px blue inset, 0px -1px 0 0px blue inset;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

this is slick, the second option is much better! thank you! – Sharon Chai Feb 14 '18 at 06:00 — Sharon Chai, Feb 14 '18 at 06:00

score 0 · Answer 3 · answered Feb 14 '18 at 03:47

0

Just add a border: 1px solid red or 1px solid transparent on the li tag. The flickering you see is because you pass to 0px border to a 1px border

answered Feb 14 '18 at 03:47

Miguel Paquet

1
2

score 0 · Answer 4 · answered Feb 14 '18 at 03:48

I assume by 'flickering' you're talking about the slight change in position of the bullet point when you hover over the inner <li>. This is due to the fact that when you add your border, it shifts the bullet points down the page.

You can compensate for this by adding margin: -1px auto to your :hover state:

li {
  background: red;
}

li:hover {
  border: 1px solid blue;
  margin: -1px auto;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

Hope this helps!

still flick if you look at it properly. and I want top and bottom border. — Sharon Chai, Feb 14 '18 at 04:29

How to create a CSS hover; over the li tag with border, flicked?

4 Answers4