Question

我正在尝试......

我试图制作一个悬停效果的菜单。如果您悬停链接，它的背景颜色应该会改变。如果你去下一个，它应该顺利地改变到下一个链接。

问题

当您将鼠标悬停在一个链接上然后转到下一个链接时，元素之间会有一个小间隙。如果您的鼠标位于该确切位置，则不会发生任何事情。

工作示例

＆＃13;

.menu-item {
  list-style: none;
  float: left;
  text-transform: uppercase;
  font-size: 21px;
  line-height: 30px;
}

a {
  padding: 20px;
}

a:hover {
  background-color: green;
}

＆＃13;

<div id="menu">
  <ul class="menu-list">
    <li class="menu-item"><a href='#'>Menü #1</a></li>
    <li class="menu-item"><a href='#'>Menü #2</a></li>
    <li class="menu-item"><a href='#'>Menü #3</a></li>
  </ul>
</div>

＆＃13;

不工作示例

＆＃13;

.menu-item {
  list-style: none;
  float: left;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 30px;
}

a {
  padding: 20px;
}

a:hover {
  background-color: green;
}

＆＃13;

<div id="menu">
  <ul class="menu-list">
    <li class="menu-item"><a href='#'>Menü #1</a></li>
    <li class="menu-item"><a href='#'>Menü #2</a></li>
    <li class="menu-item"><a href='#'>Menü #3</a></li>
  </ul>
</div>

＆＃13;

我的观察

如果您将font-size更改为一个像素，则可以正常工作。如果我使用IE，它可以在两个示例中使用，但在Chrome中只有Working One有效：D

我要求的是什么......

这是一个Chrome错误还是有可能让“不能正常工作”工作

Answer 1

这实际上是一个有趣的问题。 “问题”是由正在阅读display:inline;标记的a的浏览器CSS引起的，而不是填充display:block;标记的整个li。 / p>

您可以使用以下CSS规则

来解决此问题

.menu-item a {
    display:block;
}

Answer 2

将display: block添加到链接中。链接小于li

Answer 3

从菜单项中删除font-size和line-height，直接设置链接的样式。这种行为很可能来自舍入错误。

悬停取决于Chrome中的字体大小

3 个答案: