2017-12-24 67 views
5

पर फ़ॉन्ट बढ़ाना लिंक मेरे पास लिंक की एक सूची है और जब उन्हें घुमाते हैं, तो मैं चाहता हूं कि फ़ॉन्ट सुचारु रूप से बढ़े।होवर

वर्तमान में फ़ॉन्ट 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/

ब्लॉकों में संलग्न लिंक उनके आकार बढ़ने जब उनके ऊपर हॉवर है।

+1

को प्रभावित नहीं करता * प्राकृतिक करने के लिए 'transition' संपत्ति घोषित काम कर सकते हैं * तत्व राज्य ताकि यह प्राकृतिक और होवर राज्य दोनों पर लागू हो। फिर ** केवल एक ** 'संक्रमण-संपत्ति 'नियम घोषित करें, कैस्केड ऑर्डर केवल अंतिम नियम लागू करेगा और उसी प्रकार के किसी भी पूर्ववर्ती कथन को अस्वीकार करेगा। शॉर्टेंड संपत्ति का उपयोग करने पर विचार करें; तत्व के किसी भी संपत्ति परिवर्तन (उदाहरण: 'रंग' और 'फ़ॉन्ट-आकार') पर संक्रमण प्रभाव लागू करने के लिए' संक्रमण ' – UncaughtTypeError

उत्तर

6

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

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>

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

हो सकता है कि यह तुम्हारी मदद कर सकता

+0

कृपया परिवर्तनों की व्याख्या भी करें और विषय स्टार्टर का कोड क्यों काम नहीं करता है। –

0

संक्रमण केवल .menuLink वर्ग के लिए लागू किया जाना चाहिए। हम इसे होवर पर लागू नहीं करते हैं। बस कोड को निम्नलिखित कोड में बदलें।

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

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

मुझे लगता है कि आप CSS सिंटेक्स पसंद कर सकते हैं:

transform: scale(1.1); 

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