时间戳

首页 > 解决方案 > 当我悬停时，如何保持其他块静止而不在 CSS 中移动？

html - 当我悬停时，如何保持其他块静止而不在 CSS 中移动？

问题描述

body {
  background: #caa178;
}

.navbar {
  overflow: hidden;
  background-color: #605f5f;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.navbar a {
  display: block;
  color: #cdcdcc;
  text-decoration: none;
  padding: 30px;
  float: right;
  margin-right: 10px;
  postion: fixed;
}

.navbar a:hover {
  background: #3a3b3b;
  font-weight: 1000;
}
<!DOCTYPE>
<html>
<div class="navbar">
  <a href="#a">ABOUT ME</a>
  <a href="#a">MY WORK</a>
  <a href="#a">CONTACT ME</a>
</div>

</html>

当我将鼠标悬停在导航栏按钮内时，我想将它们加粗，但我不想稍微移动其他 2 个按钮，我该怎么做才能解决这个问题？谢谢你。

标签： htmlcss

解决方案

您可以为a菜单中的元素分配固定宽度，也可以使用monospace字体：

body {
  background: #caa178;
}

.navbar {
  overflow: hidden;
  background-color: #605f5f;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

.navbar a {
  display: block;
  color: #cdcdcc;
  text-decoration: none;
  padding: 30px;
  float: right;
  margin-right: 10px;
  font-family: monospace;
}

.navbar a:hover {
  background: #3a3b3b;
  font-weight: 1000;
}
<html>
<div class="navbar">
  <a href="#a">ABOUT ME</a>
  <a href="#a">MY WORK</a>
  <a href="#a">CONTACT ME</a>
</div>

</html>

另请注意，您尝试将 position: fixed 应用于无法正常工作的 a 元素（默认情况下它们会重叠），这仅不适用，因为您在那里有错字（“postion：fixed”）。

推荐阅读