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/

Answer 2

#sidebar .nav>li>a {
    border-left: 2px solid transparent;
}

jsFiddle example

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

2 个答案: