Question

我正在尝试使我的导航栏文本（链接）在鼠标悬停时增加字体大小。可悲的是，我无法使其发挥作用。可能是那个显示：内联（-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=size-increase navbar-links

而不是

class="size-increase navbar-links"

navbar-links:hover{}

应该是

.navbar-links:hover{}

悬停

1 个答案: