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;在标题链接上应用此规则

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

2 个答案: