CSS 无边距悬停尺寸

Question

目前我正在尝试在鼠标悬停时让我的导航栏元素变大。但是当我将鼠标悬停在它们上面时，网站的其余部分向下移动了一点，看起来很糟糕。有没有什么办法可以在不影响网站其他元素的情况下将导航栏中的文字变大？

nav {
    text-align:center;
    margin-top: 20px;
    margin-bottom: -4px;
}

.nav{
    text-decoration: none;
    color: black;
    text-transform:uppercase;
    font-weight: 600;
    padding: 5px;
    font-family: calibri;
    padding-top: 2px;
    transition-property: all;
    transition-duration: 500ms;
}

.nav:hover {
    font-size: 130%;
    opacity: 0.6;    
}

.LLHashtag {
    width: 370px;
    margin: 0 Auto;
    text-align: center;
    text-decoration: none;
    margin-top: 5px;   
    font-size: 50px;
    text-transform:uppercase;
    font-weight: 600; 
    color: black;
    border-top: solid black 2px;
    font-family: "helvetica Neue";
    font-weight: 400;
}

<nav>
    <a class="nav" href="http://www.google.de">Home</a>
    <a class="nav" href="http://www.google.de">Über</a>
    <a class="nav" href="http://www.google.de">Motivation</a>
    <a class="nav" href="http://www.google.de">Kontakt</a>
    <a class="nav" href="http://www.google.de">Impressum</a>
    </nav>
    <h1 class="LLHashtag">#LifeLetics</h1>

Answer 1

是的，您可以对导航栏上的文本使用 css 转换，例如transform: scale(1.2)

.element:hover{
   transform: scale(1.2);
}

这不会影响页面上的其他内容
您还需要 display: inline-block; 将此规则应用于 header 个链接

nav {
  text-align: center;
  margin-top: 20px;
  margin-bottom: -4px;
}
.nav {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px;
  font-family: calibri;
  padding-top: 2px;
  transition-property: transform;
  transition-duration: 500ms;
  display: inline-block;
}
.nav:hover {
  opacity: 0.6;
  transform: scale(1.2);
  backface-visibility: hidden;
}
.LLHashtag {
  width: 370px;
  margin: 0 Auto;
  text-align: center;
  text-decoration: none;
  margin-top: 5px;
  font-size: 50px;
  text-transform: uppercase;
  font-weight: 600;
  color: black;
  border-top: solid black 2px;
  font-family: "helvetica Neue";
  font-weight: 400;
}

<nav>
  <a class="nav" href="http://www.google.de">Home</a>
  <a class="nav" href="http://www.google.de">Über</a>
  <a class="nav" href="http://www.google.de">Motivation</a>
  <a class="nav" href="http://www.google.de">Kontakt</a>
  <a class="nav" href="http://www.google.de">Impressum</a>
</nav>
<h1 class="LLHashtag">#LifeLetics</h1>

Answer 2

您可以尝试使用transform: scale(1.2)。不要忘记将 1.2 更改为您想要的比例。

CSS 无边距悬停尺寸

CSS on hover size without margin

html

css

size

margin

hover