होवर

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

आप कुछ अधिभावी चल रहा है। आप एक पंक्ति में उन्हें घोषित करने के लिए की जरूरत है:

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

यह बेहतर यह अन्य लिंक