在悬停

Question

我有一个链接列表，当悬停它们时，我希望字体平滑增长。

目前，即使使用transition，字体也会立即增长。

#menuHeader {
  font-weight: bold;
}

.link {
  text-decoration: none;
}

.menuItem {
  list-style-type: none;
  margin-bottom: 10px;
}

.menuLink {
  transition-property: font-size;
  transition-property: color;
  transition-duration: 0.3s;
  font-size: 16px;
  color: #000000;
}

.menuLink:hover {
  transition-property: font-size;
  transition-property: color;
  transition-duration: 0.3s;
  font-size: 20px;
  color: #97d700;
}

<ul>
  <li class="menuItem" id="menuHeader">Title</li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 1</a></li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 2</a></li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 3</a></li>
</ul>

这是一个示例页面

https://www.roidna.com/services/

当悬停在它们上方时，块中附加的链接会变大。

Answer 1

你有一些压倒一切。你需要在一行上声明它们：

transition: color 0.5s, font-size 0.5s;

＆＃13;

＆＃13;

#menuHeader {
  font-weight: bold;
}

.link {
  text-decoration: none;
}

.menuItem {
  list-style-type: none;
  margin-bottom: 10px;
}

.menuLink {
  -webkit-transition: color 0.5s, font-size 0.5s;
  transition: color 0.5s, font-size 0.5s;
  font-size: 16px;
  color: #000000;
}

.menuLink:hover {
  font-size: 20px;
  color: #97d700;
}

＆＃13;

<ul>
  <li class="menuItem" id="menuHeader">Title</li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 1</a></li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 2</a></li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 3</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.menuLink {
  font-size: 16px;
  color: #000000;

    -webkit-transition: color 0.3s, font-size 0.3s;
       -moz-transition: color 0.3s, font-size 0.3s;
         -o-transition: color 0.3s, font-size 0.3s;
            transition: color 0.3s, font-size 0.3s;
}

.menuLink:hover {
  font-size: 20px;
  color: #97d700;
}

也许这可以帮到你

Answer 3

转换应仅适用于.menuLink类。我们不会将其应用于悬停。只需将代码更改为以下代码即可。

.menuLink {
  transition: font-size 300ms ease-in-out;
  font-size: 16px;
  color: #000000;
}

.menuLink:hover {
  font-size: 20px;
  color: #97d700;
}

Answer 4

我想你可能会喜欢CSS语法：

transform: scale(1.1);

这可能会更好，因为它不会影响其他链接