ajkumar25 ajkumar25 - 1 month ago 8
CSS Question

Links Move to right on Hover in CSS?

I am Styling the Navigation Links and when i hover on the link, it changes color but it moves a few pixels on right side and again becomes normal when the cursor is removed from hovering.

My Navigation CSS

.logo-wrapper {
padding-bottom: 85px;
background-color: #2e3639;

}

.logo-items{
display: inline-block;
position: relative;
color: white;
font: "Times New Roman";
float: left;
margin-left: 500px;
margin-top: 30px;
text-decoration: none;

}

.logo-items a{
text-decoration: none;
color: white;
margin-left: 10px;
margin-right: 10px;
border-bottom:solid 1px transparent;
}

.logo-items a:hover {
background-color: #61696c;
padding: 4px 4px 4px 4px;
border-radius: 10px;
}

.logo-items span {
margin-right: 10px;
}


My Navigation

<div class="logo-wrapper">
<div class="logo-items">
<span>Logo</span>
<span>
<%= link_to "Tags", tags_path %>
</span>
<span>Pages</span>

</div>
</div>

Answer

Hey you are getting this because you have added padding to your :hover to get your grey background effect.

.logo-items a:hover {
  background-color: #61696c;
  padding: 4px 4px 4px 4px;
  border-radius: 10px;
}

A quick way to stop the jump is to add padding to your link in the first place so the widths are allways the same

.logo-items a{
  text-decoration: none;
  color: white;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom:solid 1px transparent;
  padding:4px;
}

Ive added a fiddle here http://jsfiddle.net/domjgreen/uNKm8/