Link rosną czcionki na hover

Question

Mam listę linków i po ich najechaniu, chcę czcionkę rozwijać płynnie.

Obecnie czcionka rośnie natychmiast, nawet przy użyciu 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>

To jest przykładowa strona

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

Linki załączone w blokach po najechaniu na nich rozwijać swoją wielkość.

Answer 1

Masz jakiś nadrzędny dzieje. Trzeba zadeklarować je w jednym wierszu:

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

#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; 
 
}

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

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; 
} 

Może to może pomóc

Answer 3

przejściowy powinien być stosowany tylko do klasy .menuLink. Nie stosujemy tego do zawisu. Po prostu zmień kod na poniższy kod.

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

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

Answer 4

myślę, że lubisz składni CSS:

transform: scale(1.1); 

to może działać lepiej, ponieważ nie ma wpływu na inne linki