लिंक से जिद्दी अंडरलाइन निकालें

Question

मैं एक अंडरलाइन के बिना, सफेद में एक लिंक शो करने का प्रयास कर रहा हूं। पाठ का रंग सफेद के रूप में सही रूप से दिखाई देता है, लेकिन नीले रंग का रेखांकन हठपूर्वक जारी है। मैंने कोशिश की text-decoration: none;और text-decoration: none !important;सीएसएस में लिंक को हटाने के लिए। न काम किया।

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

मैं लिंक से ब्लू अंडरलाइन कैसे निकाल सकता हूं?

Comments

अच्छी तरह से यह दूर जाना चाहिए जब आप पाठ-सजावट करते हैं: कोई नहीं। क्या आप वाकई इसे सही तत्व के लिए अपील कर रहे हैं? क्या आप उदाहरण कोड प्रदान कर सकते हैं?

— शाम ०

पाठ-सजावट कहाँ है: कोई भी उपयोग नहीं किया जा रहा है?

— शटल 87

Answer 1

जैसा कि मुझे उम्मीद थी, आप text-decoration: none;एक एंकर ( .boxhead a) के लिए नहीं बल्कि एक स्पैन एलिमेंट के लिए आवेदन कर रहे हैं (.boxhead ) के ।

इसे इस्तेमाल करे:

.boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}

Comments

लेकिन क्या होगा यदि आपके पास स्पैन के साथ-साथ चारों ओर का टेक्स्ट है , और आप चाहते हैं कि आसपास के टेक्स्ट में लिंक अंडरलाइन हो, लेकिन स्पैन के भीतर का टेक्स्ट कोई भी न हो?

— JMTyler

@rebus, आप नहीं कर सकते? क्यों नहीं? कम से कम IE7 + और फ़ायर्फ़ॉक्स 4+ में कारण, लेकिन किसी कारण से क्रोम में नहीं। यहां मेरे द्वारा परीक्षण किए गए गैर-क्रोम ब्राउज़रों में काम करने वाला कोड है: .toc-list a > span{text-decoration:none !important;} मुझे लगता है कि @ JMTyler का प्रश्न वैध है; मैं उसी उपाय को खोज रहा हूं।

— टोनी टॉपर

ऐसा लगता text-decorationहै कि नेस्टेड टैग पर ओवरराइड करने का समर्थन नहीं करता है, जैसा कि ऊपर संकेत दिया गया है। एक बार a { text-decoration: underline; }नियम लागू होने के बाद आप इसे लागू नहीं कर सकते हैंa .wish_this_were_not_underlined { text-decoration: none; } । मुझे इसके लिए संदर्भ नहीं मिल रहा है लेकिन यह मेरा अनुभव है (क्रोम में)।

— आंशिक रूप से बादल छाए रहेंगे

ऊपर के अन्य लोगों की तरह मैं भी आवेदन करके पाठ को डी-अंडरलाइन करने में सक्षम नहीं था, text-decoration: none;इसके बजाय हमने उपयोग करने वाली रेखा को छिपाने के लिए चुना text-decoration: underline; text-decoration-color: white;। / हैक

— रयान बर्बिज

यदि आप केवल एक एंकर के अंदर एक तत्व से अंडरलाइन को हटाने की कोशिश कर रहे हैं, और पूरे एंकर को नहीं। आपको आंतरिक तत्व को एक इनलाइन-ब्लॉक बनाने की आवश्यकता है: .boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }

— पैट्रिक डेनी

Answer 2

एंकर टैग (लिंक) में छद्म कक्षाएं भी हैं जैसे कि दौरा, होवर, लिंक और सक्रिय। सुनिश्चित करें कि आपकी शैली को राज्य में लागू किया गया है और यह सवाल है कि कोई अन्य शैली परस्पर विरोधी नहीं है।

उदाहरण के लिए:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

उपयोगकर्ता कार्रवाई छद्म-वर्गों पर अधिक जानकारी के लिए W3.org देखें : होवर,: सक्रिय, और: फोकस।

Comments

मुझे लगता है कि आपका मतलब है a:linkजब आप कहते हैंa:click

— आर्टेलुंग

यह वास्तविक स्वीकृत उत्तर होना चाहिए, क्योंकि मुझे अपने बटन लिंक पर क्लिक करने के बाद भी यही समस्या थी। जब मैं पृष्ठ पर वापस आया तो विज़िट की गई संपत्ति अभी भी बैंगनी में बदल रही थी।

— Doresoom

Answer 3

text-decoration: none !importantइसे हटा देना चाहिए .. क्या आप सुनिश्चित हैं कि कोई border-bottom: 1px solidगुप्त बात नहीं है ? (IE में फायरबग / F12 में गणना की गई शैली का पता लगाएं)

Comments

border-bottom-style: none;मेरे लिए यह तय करना ।

— हेलडर एस रिबेरो

Answer 4

बस इस विशेषता को अपने एंकर टैग में जोड़ें

style="text-decoration:none;"

उदाहरण:

<a href="page.html"  style="text-decoration:none;"></a>

या CSS तरीके का उपयोग करें।

.classname a {
    color: #FFFFFF;
    text-decoration: none;
}

Answer 5

कभी-कभी जो आप देख रहे हैं वह एक बॉक्स छाया है, न कि एक पाठ को रेखांकित करना।

इसे आज़माएं (जो भी CSS चयनकर्ता आपके लिए उपयुक्त हैं उनका उपयोग करके):

a:hover, a:visited, a:link, a:active {

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

Comments

यह उत्तर होना चाहिए .. कभी-कभी, बॉक्स छाया एक अंडरलाइन प्रभाव देता है।

— भार्गव

यह एक उत्तर है, लेकिन सबसे अच्छा नहीं है। उन का दायरा वैश्विक है और विशिष्ट नहीं है। कुछ इस तरह से करना चाहिए ट्रिक .otherPage a:link {text-decoration:none;}:; जरूरत पड़ने पर, सक्रिय और मंडराने के लिए उसे दोहराएं।

— अजोई

Answer 6

आप एंकर टैग केtext-decoration:none लिए चूक गए । तो कोड निम्नलिखित होना चाहिए।

.boxhead a {
    text-decoration: none;
}

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

पाठ-सजावट के लिए अधिक मानक गुण

Answer 7

पेज देखे बिना, अटकलें लगाना मुश्किल।

लेकिन यह मुझे लगता है जैसे आप एक border-bottom: 1px solid blue;लागू किया जा सकता है । शायद जोड़ दें border: none;।text-decoration: none !importantयह सही है, यह संभव है कि आपके पास एक और शैली है जो अभी भी उस सीएसएस को ओवरराइड कर रही है।

यह वह जगह है जहां फ़ायरफ़ॉक्स वेब डेवलपर टूलबार का उपयोग करना भयानक है, आप सीएसएस को वहीं संपादित कर सकते हैं और देख सकते हैं कि चीजें काम करती हैं, कम से कम फ़ायरफ़ॉक्स के लिए। इसके तहत है CSS > Edit CSS।

Answer 8

एक नियम के रूप में, यदि आपका "अंडरलाइन" आपके टेक्स्ट के समान रंग नहीं है [और 'कलर:' इनलाइन को ओवरराइड नहीं करता है] यह "टेक्स्ट-डेकोरेशन" से नहीं आ रहा है: "इसे" बॉर्डर-बॉटम: "होना चाहिए।

अपने छद्म वर्गों को भी सीमा पर ले जाना मत भूलना!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

यह स्निपेट एक एंकर पर मानता है, इसके अनुसार इसे बदलने के लिए ... और मूल कारण को ट्रैक करने के बाद "महत्वपूर्ण" के बजाय विशिष्टता का उपयोग करें।

Answer 9

जबकि अन्य उत्तर सही हैं, उन सभी pesky लिंक पर अंडरलाइन से छुटकारा पाने का एक आसान तरीका है:

a {
   text-decoration:none;
}

यह आपके पेज पर हर जगह लिंक से अंडरलाइन को हटा देगा!

Comments

सुनिश्चित करें कि एंकर टैग और इनलाइन पर बेहतर हो सकता है क्योंकि आप अन्य लिंक पर अंडरलाइन चाहते हैं।

— 14-13 को Asuquo12

Answer 10

तो text-decoration: noneया border: 0काम नहीं करता, अपने html में इनलाइन शैली को लागू करने का प्रयास करें।

Answer 11

बस संपत्ति का उपयोग करें

border:0;

और आप कवर किए गए हैं जब मेरे लिए टेक्स्ट-डेकोरेशन प्रॉपर्टी काम करती है तो पूरी तरह से काम करती है।

Answer 12

मेरे किसी भी जवाब ने काम नहीं किया। मेरे मामले में एक मानक था

a:-webkit-any-link {
text-decoration: underline;

मेरे कोड में मूल रूप से यह जो भी लिंक है, पाठ का रंग नीला हो जाता है, और लिंक जो कुछ भी है वह रहता है।

इसलिए मैंने हेडर के अंत में इस तरह कोड जोड़ा:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

और समस्या और नहीं है।

Answer 13

  a {
    color: unset;
    text-decoration: unset;
  }

Answer 14

यहाँ asp.net webforms LinkButton नियंत्रण के लिए एक उदाहरण है:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

कोड के पीछे:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

Answer 15

आपने गलत चयनकर्ता में टेक्स्ट-डेकोरेशन का उपयोग नहीं किया है। आपको यह जांचने की आवश्यकता है कि सजावट के लिए आपको किस टैग की आवश्यकता है।

आप इस कोड का उपयोग कर सकते हैं

.boxhead h2 a{text-decoration: none;}

या

.boxhead a{text-decoration: none !important;}

या

a{text-decoration: none !important;}

Answer 16

<BODY>टैग से पहले निम्नलिखित HTML कोड डालें:

<STYLE>A {text-decoration: none;} </STYLE>

Answer 17

मेरे मामले में, मैंने HTML का खराब गठन किया था। लिंक एक <u>टैग के भीतर था , और <ul>टैग नहीं ।

Answer 18

जैसा कि दूसरों ने बताया है, ऐसा लगता है कि आप नेस्टेड टेक्स्ट-डेकोरेशन स्टाइल को ओवरराइड नहीं कर सकते ... लेकिन आप टेक्स्ट-डेकोरेशन-कलर को बदल सकते हैं।

हैक के रूप में, मैंने पारदर्शी होने के लिए रंग बदल दिया:

पाठ-सजावट-रंग: पारदर्शी;