30
मैं क्या कोशिश कर रहा हूँ में font-size पर निर्भर करता है ...होवर क्रोम
मैं एक हॉवर प्रभाव के साथ एक मेनू बनाने की कोशिश कर रहा हूँ। यदि आप एक लिंक होवर करते हैं, तो पृष्ठभूमि-रंग बदलना चाहिए। यदि आप अगले के पास जाते हैं, तो इसे अगले लिंक पर आसानी से बदलना चाहिए।
समस्या
आप एक लिंक पर जाएँ और फिर अगले एक करने के लिए जाना है, वहाँ तत्वों के बीच एक छोटे से अंतराल है। यदि आपका माउस उस सटीक स्थान पर है, तो कुछ भी नहीं होता है।
कार्य उदाहरण
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 21px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>काम नहीं कर उदाहरण
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 20px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>मेरे अवलोकन
आप पिक्सेल font-size सिर्फ एक से बदलते हैं, तो यह काम करता है। अगर मैं IE का उपयोग यह दोनों उदाहरण में काम करता है, लेकिन क्रोम में केवल कार्य एक काम करता है: डी
क्या मैं के लिए ...
पूछ रहा हूँ कि यह एक Chrome बग है या है 'काम नहीं कर रहे' काम करने की संभावना।
यह एक बहुत ही दिलचस्प टुकड़ा है का उपयोग करके इसे ठीक कर सकते - मैं अपने जवाब में इस मुद्दे को विस्तार से बताया गया है, लेकिन संक्षेप में, यह क्योंकि प्रदर्शन संपत्ति में बनाया का मूल रूप से है क्रोम ब्राउज़र में कुछ डिफ़ॉल्ट स्टाइल के साथ 'ए' टैग के साथ। अच्छी तरह से देखा गया। और एक बहुत अच्छी तरह से लिखित प्रश्न के लिए +1। – Frits
मेरा बहुत अच्छा सवाल –
मैकोज़ पर क्रोम 57 और ओपेरा 44 में ठीक काम करता है। क्या उदाहरण पुराने क्रोम संस्करणों के साथ बदल गए हैं या क्या यह समस्या है? – OptimusCrime