ホバーにリンクするフォントを増やす

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

を助けることができます。あなたは、1行にそれらを宣言する必要があります：

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

多分これはあなたには、いくつかのオーバーライドが起こっていあなたの

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

それは*自然に `transition`プロパティを宣言し、他のリンク