悬停时导航栏字体不会增加

Question

我试图让我的导航栏文本（链接）在鼠标悬停时增加字体大小。可悲的是我无法让它发挥作用。难道是 display: inline(-block) 让它变得不可能？还是因为我没有在导航栏的 CSS 中指定字体大小？我的文本是黑底白字，字体大小（我认为）是从正文继承的。

这是我尝试过的：

.size-increase:hover {
font-size: 200%
  -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5)
}

虽然这对我的按钮很有效，但它对我的导航栏没有任何作用。然后我尝试为我的导航栏制作一个单独的 CSS 悬停，并分别尝试了以下所有字体增加方法。

  .navbar-links:hover{
 font-size: 5px;
font-size: larger;
font-size: 150%

}

这是我的 HTML:

<nav class="navbar-transparent">
  <div class="container"><a href="index.html"><img src="assets/images/logo/logo-light.png" alt="Logo" class="logo"/></a><a data-toggle="collapse" data-target="#side-menu" class="toggle-menu menu-right pull-right push-body nav-icon"><span class="sr-only">Toggle Navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
    <div class="collapse navbar-collapse text-center">
      <ul class="navbar-nav-transparent text-center">
        <li><a href="#about" class="size-increase navbar-links">ABOUT US</a></li>
        <li><a href="#video-intro" class="size-increase navbar-links">VIDEO</a></li>
        <li><a href="#services" class="size-increase navbar-links">REQUIREMENTS</a></li>
        <li><a href="#works" class="size-increase navbar-links">PROJECTS</a></li>
        <li><a href="#team" class="size-increase navbar-links">INTERVIEWS</a></li>
        <li><a href="#contact" class="size-increase navbar-links">APPLY</a></li>
      </ul>

这里是 CSS:

.navbar ul.navbar-nav {
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  width: 97%;
  text-align: center;
}

.navbar ul.navbar-nav > li {
  float: none;
  display: inline-block;
}

.navbar .navbar-collapse {
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Answer 1

你的class写的不对；你有 class=size-increase navbar-links

而不是

class="size-increase navbar-links"

navbar-links:hover{}

应该是

.navbar-links:hover{}

悬停时导航栏字体不会增加

Navbar font doesn't increase on hover

html

css

font-size

hover

navbar