2012-07-13 15 views
26

शीर्षक के रूप में, मैं .icon-* का उपयोग कर आइकन जोड़ रहा हूं। जब एक हाइपरलिंक के लिए एक आइकन जोड़ने:: होवर: टेक्स्ट-सजावट से पहले कोई भी प्रभाव नहीं पड़ता है?

<a href="#" class="icon-email icon-large">Email me!</a> 

सामग्री content संपत्ति द्वारा डाला हॉवर पर रेखांकन text-decoration को दर्शाता है। मैं केवल सामग्री के लिए text-decoration निष्क्रिय करने के लिए इससे पहले कि चाहते हैं:

[class^="icon-"]:before, [class*=" icon-"]:before { 
    font-family: 'IcoMoon'; 
    font-style: normal; 
    speak: none; 
} 
.icon-mail:before { 
    content: "\37"; 
} 
[class^="icon-large-"]:before, [class*=" icon-large"]:before { 
    font-size: 48px; 
    line-height: 48px; 
} 
a[class^="icon-"]:before, a[class*=" icon-"]:before { 
    margin-right: 5px; 
    vertical-align: middle; 
} 

मैं इस की कोशिश की है, लेकिन यह काम नहीं कर रहा (सजावट अभी भी दिखाई दे रहा है):

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before { 
    text-decoration: none; 
    color: white; 
} 
+0

आप ऐसा नहीं कर सकते कि pseudoelements साथ। आपको जेएस का उपयोग करना होगा। – Bojangles

+0

हाँ आप बिना जेएस के छद्म और छद्मक्लास को डबल-अप नहीं कर सकते हैं। मैं संभालने के लिए जावास्क्रिप्ट का उपयोग करने का सुझाव दूंगा: होवर को संभालने के बजाए। ऐसा इसलिए है क्योंकि: पहले सभी ब्राउज़रों द्वारा समर्थित नहीं है। लेकिन यह सिर्फ 2 सेंट है .. – BumbleB2na

+0

@ BumbleB2na कम से कम IE8 +, FF10.0.2 +, ओपेरा 11.61+, सफारी 5.1.2+, क्रोम 17 http://www.quirksmode.org/css/contents.html – gremo

उत्तर

28

the :before pseudo-element is rendered as a descendant box के रूप में (खासतौर पर, सिर्फ पहला बच्चा सामग्री बॉक्स से पहले), यह the same rules its normal descendant boxes do with respect to text-decoration का अनुसरण करता है:

'पाठ वंश तत्वों पर सजावट 'संपत्ति पूर्वजों की सजावट पर कोई प्रभाव नहीं डाल सकती है।

अधिक जानकारी के लिए इन उत्तरों देखें:

इस ... केवल विकल्पों जो मन में तुरंत आ भर में किसी भी अच्छा तरीका नहीं है हैं:

  • टेक्स्ट को अपने span तत्व में लपेटें, फिर text-decoration पर span, as shown by skip405 पर लागू करें। नुकसान, ज़ाहिर है, अतिरिक्त मार्कअप।

  • अपने :before छद्म तत्व के साथ एक आइकन फ़ॉन्ट में इनलाइन पाठ के बजाय एक इनलाइन ब्लॉक पृष्ठभूमि छवि का उपयोग करें (मैं भी अपने वर्ग चयनकर्ताओं के साथ विसंगतियों में सुधार किया है):

    [class^="icon-"]:before, [class*=" icon-"]:before { 
        display: inline-block; 
        width: 1em; 
        height: 1em; 
        background-size: contain; 
        content: ""; 
    } 
    .icon-email:before { 
        background-image: url(icon-mail.svg); 
        background-repeat: no-repeat; 
    } 
    .icon-large:before { 
        width: 48px; 
        height: 48px; 
    } 
    a[class^="icon-"]:before, a[class*=" icon-"]:before { 
        margin-right: 5px; 
        vertical-align: middle; 
    } 
    

    लाभ यह है skip405 के समाधान पर यह है कि आपको HTML को संशोधित करने की आवश्यकता नहीं है, लेकिन यह देखते हुए कि यह SVG vector background images और background-size का उपयोग करता है, यह IE8 में काम नहीं करेगा।

    आप IE8 समर्थन की जरूरत है, तो आप बिटमैप छवियों में वापस आने का है:

    .icon-email:before { 
        background-image: url(icon-mail.png); 
    } 
    .icon-email.icon-large:before { 
        background-image: url(icon-mail-large.png); 
    } 
    
+0

वास्तव में आपके समय और आपके महान स्पष्टीकरण के लिए धन्यवाद। मैं अतिरिक्त मार्कअप समाधान के लिए जाऊंगा। – gremo

2

एक pseudoelement चयनकर्ता होना चाहिए चयन श्रृंखला में अंतिम आइटम।

आप element:hover:before पर एक शैली लागू कर सकते हैं लेकिन element:before:hover पर नहीं।

+0

यह वास्तव में है ... शीर्षक गलत है, सवाल सही है। इसे ठीक करने के लिए जा रहे हैं। – gremo

1

मार्कअप के रूप में केवल a टैग का उपयोग करके कुछ चीजों का प्रयास किया, लेकिन हां। उदाहरण के लिए, आपके लिए एक संभावित कार्यवाही किसी अन्य तत्व में लिंक को आंतरिक रूप से लपेटने के लिए हो सकती है, span। इस प्रकार आप इस तत्व पर एक रेखांकित कर सकते हैं (एक छद्म छत के बजाय) - जिसे पूरी तरह से सीएसएस द्वारा नियंत्रित किया जाता है।

एक लाइव उदाहरण यहाँ है: अपने सृजन तत्व की http://jsfiddle.net/skip405/fQHUH/

4

आप ऊंचाई सेट कर सकते हैं & अतिप्रवाह: छिपा: तत्व से पहले, और पाठ-सजावट नहीं होगा दृश्यमान रहें :)

28

प्रदर्शन डालें: इनलाइन-ब्लॉक; आपके सीएसएस में नीचे दिए गए एक तरह कुछ:

.icon-mail:before { 
    content: "\37"; 
    display:inline-block; 
    text-decoration:none; 
} 

यहाँ जे एस बेला है:

http://jsfiddle.net/73p2k/18/

+6

दुर्भाग्य से आईई में काम नहीं करता है। – acme

+0

इस चाल के लिए आपको बहुत बहुत धन्यवाद। इसे जोड़ने का कभी सोचा नहीं होगा। –

+4

@acme, कृपया आईई समर्थन के लिए नवीनतम jsfiddler देखें। आईई 9 में परीक्षण किया गया http://jsfiddle.net/73p2k/18/ – Pinoy2015

संबंधित मुद्दे