如何在悬停时控制div:？

Question

我发现了一种在悬停时更改菜单选项背景颜色的方法.但是,当你悬停一个选项时,它会占用一些宽阔的空间,将所有其他选项移动到右边,它有点烦人,我想保持一致的空间,所以如果我悬停,只有颜色应该改变,而不是选项向右移动.Facebook的菜单选项方式排序.

以下是代码:

  <div id="menu">
  <a href="/hello" id="option">home</a>
  <a href="/hello" id="option">profile</a>
  <a href="/hello" id="option">account</a>
  <a href="/hello" id="option">settings</a>
  <a href="/hello" id="option">extra</a>
  <a href="/hello" id="option">logout</a>
  </div>

CSS:

  div#menu {
  margin-left: 630px;
  margin-top:-20px;
  }
  option {
  margin-left: 20px;
  }
  #option:hover{
  background: #3F2327;
  padding: 10px;
  }

Answer 1

去掉 padding: 10px;

元素周围的空间占用空间,因此如果您不想要空间,请不要添加空间.如果您一直想要它,请一直添加它,而不仅仅是为了:hover

此外,与您的问题无关,但只是良好的做法:

• 如果您使用的浏览器不支持CSS,关闭它,或者不是图形浏览器,您最终会使用主页配置文件帐户设置额外注销 - 您有一个链接列表,使用列表标记.有很多指导使它漂亮.
• id必须在文档中是唯一的,只能用它来标识特定元素.如果要声明一堆元素都是同一个类的成员,请使用class属性.
• 避免使用与HTML元素相同的类和id名称,这只会使代码混乱