Question

当我将鼠标悬停在其中一个菜单项上时，菜单会向左移动。那是为什么？

HTML：

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="geschiedenis.html">Geschiedenis</a></li>
        <li><a href="team.html">Team</a></li>
        <li><a href="agenda.html">Agenda</a>
        <li><a href="fotos.html">Foto's</a></li>
        <li><a href="vacatures.html">Vacatures</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

CSS：

nav {
  float: right;
  border-radius: 15px;
}
nav ul {
  list-style-type: none;
  margin-top: 55px;
}
nav li {
  float: left;
  margin-right: 25px;
  position: relative;
}
nav a {
  text-decoration: none;
  color: gray;
  font-size: 20px;
}
nav li:hover a {
  color: black;
  font-size: 22px;
}

Answer 1

我可以看到你需要在使用鼠标悬停时增加菜单链接的大小，但如果增加font-size，这将使链接的位置脱臼，这就是你链接的原因向左移动。

使用css transform:scale(1.1,1.1)属性来增加大小而不改变位置。

＆＃13;

nav {
  float: right;
  border-radius: 15px;
}

nav ul {
  list-style-type: none;
  margin-top: 55px;
}

nav li {
  display: inline-block;
  vertical-align: top;
  margin-right: 25px;
  position: relative;
}

nav a {
  text-decoration: none;
  font-size: 20px;
  color: gray;
  display:block;
}

nav li:hover a {
  color: black;
  transform:scale(1.1,1.1);
  -moz-transform:scale(1.1,1.1);
  -ms-transform:scale(1.1,1.1);
  -o-transform:scale(1.1,1.1);
  -webkit-transform:scale(1.1,1.1);
}

＆＃13;

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="geschiedenis.html">Geschiedenis</a></li>
    <li><a href="team.html">Team</a></li>
    <li><a href="agenda.html">Agenda</a>
    <li><a href="fotos.html">Foto's</a></li>
    <li><a href="vacatures.html">Vacatures</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

＆＃13;

transform属性应该与前缀一起使用，以便在所有浏览器中都支持。

Answer 2

请删除nav li:hover a { font-size:22px; }，以便在悬停时不会向左移动

Answer 3

将float替换为inline-block <li>。并且您正在更改font-size悬停，这会在列表项上创建舞蹈效果。最好保持正常和悬停状态相同font-size。

＆＃13;

nav {
  float: right;
  border-radius: 15px;
}

nav ul {
  list-style-type: none;
  margin-top: 55px;
}

nav li {
  display: inline-block;
  vertical-align: top;
  margin-right: 25px;
  position: relative;
}

nav a {
  text-decoration: none;
  font-size: 20px;
  color: gray;
}

nav li:hover a {
  color: black;
}

＆＃13;

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="geschiedenis.html">Geschiedenis</a></li>
    <li><a href="team.html">Team</a></li>
    <li><a href="agenda.html">Agenda</a>
    <li><a href="fotos.html">Foto's</a></li>
    <li><a href="vacatures.html">Vacatures</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

＆＃13;

Answer 4

尝试在css3中使用flex来查看是否适用于增长文本。还有一个HTML菜单标签，您可能需要查看。

菜单在悬停时向左移动

4 个答案: