通过悬停或激活防止文本两个像素移位？

Question

我正在创建一个基本菜单,并尝试在活动或悬停时显示两个像素宽的左侧块.问题是我的文字在活动或悬停时会移动到正确的两个像素.

我创建了这个jsfiddle以显示问题.

我的CSS看起来像这样:

#sidebar {
  height: 100%;
  padding-right: 0;
  padding-top: 20px;
}

#sidebar .nav {
  width: 95%; 
}

#sidebar li {
}

#sidebar .nav>.active>a, #sidebar .nav>.active:hover>a, #sidebar .nav>.active:focus>a {
  font-weight: 700;
  color: #563d7c;
  background-color: transparent;
  border-left: 2px solid #563d7c;
}

#sidebar .nav>li>a:hover, #sidebar .nav>li>a:focus {
  font-weight: 700;
  color: #563d7c;
  background-color: transparent;
  border-left: 2px solid #563d7c;
}

知道如何在将鼠标悬停在菜单项上或选中时阻止文本向右移动吗？

谢谢,-Paul

Answer 1

只需添加一个

border-left: 2px solid transparent;

当它们处于正常状态时的链接.
在:hover您必须只更改border-color属性(您也可以通过简单的css转换平滑地更改颜色).

基本示例:http://jsfiddle.net/sLokoys3/

转换示例:http://jsfiddle.net/5Lnytpx9/1/