html - 通过悬停或事件防止文本两个像素偏移？

Question

我正在创建一个基本菜单，并试图在激活或悬停时显示两个像素宽的左侧 block 。问题是我的文本在事件或悬停时向右移动两个像素。

我创建了这个 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;
}

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

谢谢， -保罗

Answer 1

只需添加一个

border-left: 2px solid transparent;

正常状态下的链接。
在 :hover 上，您只需更改 border-color 属性(您也可以通过简单的 css 转换平滑地更改颜色)。

---

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

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