Liên kết phát triển phông chữ khi di chuột

Question

Tôi có danh sách các liên kết và khi di chuột lên chúng, tôi muốn phông chữ phát triển suôn sẻ.

Hiện tại phông chữ phát triển tức thì, ngay cả khi sử dụng 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>

Đây là một trang ví dụ

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

Các liên kết đính kèm trong các khối phát triển kích thước của chúng khi lơ lửng trên chúng.

Answer 1

Bạn có một số trọng xảy ra. Bạn cần phải khai báo chúng trên một dòng:

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

Có lẽ điều này có thể giúp bạn

Answer 3

chuyển nên được áp dụng chỉ đến lớp .menuLink. Chúng tôi không áp dụng nó để di chuột. Chỉ cần thay đổi mã thành mã sau đây.

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

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

Answer 4

Tôi nghĩ rằng bạn có thể thích cú pháp CSS:

transform: scale(1.1); 

Điều này có thể làm việc tốt hơn vì nó không ảnh hưởng đến các liên kết khác