La police Navbar n'augmente pas lors du vol stationnaire

Question

J'essaie de faire en sorte que le texte de ma barre de navigation (qui est des liens) augmente la taille de police au passage de la souris. Malheureusement, je ne peux pas le faire fonctionner. Se pourrait-il que l'affichage: inline (-block) le rende impossible? Ou pourrait-il être parce que je n'ai pas spécifié une taille de police dans le CSS pour ma barre de navigation? Mon texte est blanc sur fond noir et la taille de la police est (je pense) héritée du corps.

Voici ce que j'ai essayé:

.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) 
} 

Bien que cela fonctionne bien pour mon bouton, il ne fait rien à ma barre de navigation. J'ai ensuite essayé de faire un hover CSS séparé pour ma barre de navigation et j'ai essayé toutes les méthodes ci-dessous de police-augmentation individuellement.

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

} 

Voici mon 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> 

Et voici 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

Votre classe est mal écrit; vous avez class=size-increase navbar-links

au lieu de

class="size-increase navbar-links"

navbar-links:hover{} 

Devrait être

.navbar-links:hover{}