Remove unwanted hover effect

Question

I currently have an hover effect written in CSS:

h2:hover{
     background-color: #FFE4B5;
     border-bottom: 1px solid #888;
     border-top: 1px solid #888;
     cursor: pointer;
}

But i noticed that when i hover each of the menu options, the text would move slightly up and then down. I didn't add anything that would cause this? I don't think.. How can i fix this and make them stay in place when hovering?

JSfiddle here

As well as a dupe of http://stackoverflow.com/questions/9612758/add-a-css-border-on-hover-without-moving-the-element and a bunch of others. — j08691, Jun 17 '15 at 21:17

score 3 · Accepted Answer · answered Jun 17 '15 at 21:13

3

It's the border that's being added and removed that's causing this issue.

Two options: add box-sizing: border-box to the item or add transparent borders to the non-hovered elements.

Example box-sizing:

h2 {
  box-sizing: border-box;
}

Example border:

h2 {
  border-top: transparent 1px solid;
  border-bottom: transparent 1px solid;
}

answered Jun 17 '15 at 21:13

Josh Burgess

9,327
33
46

border-sizing didn't seem to work, but the transparent border worked. Thanks! – PhoonOne Jun 17 '15 at 21:16
@JennyC – If this helped solve your question, be sure to mark it as the answer. Thanks! – Josh Burgess Jun 18 '15 at 19:37

score 2 · Answer 2 · answered Jun 17 '15 at 21:12

The movement comes from the border being added and removed on hover. An easy fix is to give the h2 element a transparent border of the same width when it's not being hovered:

h2{
     border-bottom: 1px solid transparent;
     border-top: 1px solid transparent;
}

Remove unwanted hover effect

2 Answers2