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，关闭它，或者不是图形浏览器，您最终会使用主页配置文件帐户设置额外注销 - 您有一个链接列表，使用list markup。有很多guidance on making it pretty。
文档中的ID必须为唯一，仅用于标识特定元素。如果要声明一堆元素都是同一个类的成员，请使用class属性。
避免使用与HTML elements相同的类和ID名称，这只会让代码混乱

Answer 2

1）你错过了一个＃on“选项”

2）为什么你在悬停时填充？当你将鼠标悬停在它上面时会产生一个动作。

如何在悬停时控制div：？

2 个答案: