html - 没有边距的悬停大小的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 转换，例如变换:缩放(1.2)

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

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

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>