2010-07-15 15 views
5

मैं अपने पृष्ठ पर अपने सभी लिंक के लिए एक a:hover है:एक विशिष्ट div के लिए सीएसएस ओवरराइडिंग?

a:hover { 
    background-color: blue; 
    text-decoration: underline; 
    color: black; 
} 

लेकिन लेकिन वहाँ एक div है कि मैं कुछ भी हो, जब आप उन पर होवर नहीं करना चाहती में विशिष्ट होते हैं, तो मैं कुछ कर सकते हैं इस तरह?

#what_we_offer a:hover { 
    background-color: none: 
    text-decoration: none; 
    color: none; 
} 

मूल रूप से मैं नहीं चाहता हूं कि यह उपरोक्त में से कोई भी कार्य करे, जब यह उनके ऊपर विशिष्ट लिंक हो।

धन्यवाद

उत्तर

6
#what_we_offer a:hover { 
    background-color: transparent; 
    text-decoration: none; 
    color: none; 
} 

किसी के बजाय पारदर्शी का उपयोग करें, जो काम करता है। सभी प्रश्नों के उत्तर के लिए

धन्यवाद।

9

हाँ कि, ठीक से काम करना चाहिए, हालांकि आप की संभावना none स्थापित करने के लिए जब तक आप वास्तव में किसी भी शैली नहीं करना चाहती नहीं चाहता ... अपने आधार रंग आदि की स्थापना ठीक काम करना चाहिए।

#what_we_offer a:hover { 
    background-color:#fff;/*presuming was originally white*/ 
    text-decoration:none; 
    color:#000;/*presuming was originally black*/ 
} 

पी एस मैं सुनिश्चित नहीं हूं, तो यह सिर्फ एक टाइपो था, लेकिन अपने मूल background-color:none: लाइन बनाम एक सेमी-कोलन इस प्रकार यह उत्पन्न कर मुद्दों को कोलन से समाप्त किया गया।

+0

जो मेरे लिए काम नहीं करता है, 'कोई भी' जिम्मेदार खुराक काम नहीं करता है। –

+0

डिफ़ॉल्ट के बाद "#what_we_offer" के लिए सबसे पहले आपका "ओवरराइड" है: होवर या उससे पहले? दूसरा, यदि आप उपरोक्त मेरे कोड का उपयोग करते हैं, तो आपको क्या मिलता है? – scunliffe

3

बल्कि सीएसएस उपयोग कक्षा

/* for link where you want to change color on hover */ 
    .Link a:hover { 
     background-color: none: 
     text-decoration: none; 
     color: red; 
    } 

/* for link where you dont want to change color on hover */ 
    a:hover { 
     background-color: none: 
     text-decoration: none; 
     color: none; 
    } 
+1

'id' बनाम 'वर्ग' के लिए - यह सब निर्भर करता है कि @Mo में 1 विशेष div या विशेष divs का संग्रह है। – scunliffe

+0

पृष्ठभूमि-रंग की खुराक के लिए जिम्मेदार 'कोई भी' काम नहीं करता –

+0

हाँ यह एक विशेष div है और इसलिए मैंने आईडी का उपयोग किया। –

0

हाँ साथ आईडी का उपयोग कर, लेकिन सावधान रहना है कि एक से: मंडराना {} #what_we_offer एक से पहले आना चाहिए: मंडराना {}।

+2

चूंकि उनके पास अलग-अलग विशिष्टताएं हैं, इसलिए आदेश वास्तव में कोई फर्क नहीं पड़ता। – Quentin

+0

@ डेविड डोरवर्ड: इसके बारे में ध्यान देने के लिए धन्यवाद। – ttchong

-4
a:hover { 
    background-color: none: 
    text-decoration: none; 
    color: none; 
} 

यह सही है।

आप केवल विशेष पृष्ठ चाहते हैं, जोड़,

body-id a:hover { 
    background-color: none: 
    text-decoration: none; 
    color: none; 
} 
+0

यह सही नहीं है (कोई भी रंग नहीं है), आप एक आईडी चयनकर्ता का उपयोग करना चाहते हैं, एक प्रकार चयनकर्ता नहीं, सवाल कहता है * div * नहीं * पृष्ठ * और आपने अपना कोड स्वरूपित नहीं किया है। – Quentin

+0

आपका उत्तर सही नहीं है। यदि उसके पास उस div के लिए एक डिफ़ॉल्ट पृष्ठभूमि रंग, पाठ सजावट इत्यादि है तो माउस उस div पर स्थानांतरित होने पर रास्ता खराब हो जाएगा। इन सभी गुणों को "ए: होवर" ब्लॉक में उस div के लिए डिफ़ॉल्ट गुणों पर सेट किया जाना चाहिए। –

0

मुझे लगता है कि अगर आप क्या प्रणव ने कहा कि रिवर्स करते हैं, आप कम संशोधनों मैं हो सकता है ई

 


/* for link where you ***DO*** NOT want to change color on hover */ 
    .Link a:hover { 
     background-color: none: 
     text-decoration: none; 
     color: red; 
    } 

/* for link where you want to change color on hover */ 
    a:hover { 
     background-color: none: 
     text-decoration: none; 
     color: none; 
    } 

ताकि आप की जरूरत है कुछ विशेष DIVs

-1

आप CSS चयनकर्ताओं का उपयोग कर सकते में एक href रों के लिए वर्ग जोड़ें। सबसे अच्छी बात यह है कि मुझे लगता है कि आप चयनकर्ता not का उपयोग कर सकते हैं। मैं आपको एक उदाहरण दिखा:

<html> 
     <head> 
       <style type="text/css"> 
         a:not([not_custom]){ 
           background: #00FF00; 
           color: #FF0000; 
         }      
       </style> 
     </head> 
     <body> 
       <div> 
         <a href="">Test 1</a> 
         <a href="" not_custom="">Test 2</a> 
         <a href="">Test 3</a> 
         <a href="" not_custom="">Test 4</a> 
         <a href="">Test 5</a> 
         <a href="" not_custom="">Test 6</a> 
       </div> 
     </body> 
</html> 

आप देख सकते हैं, मैं not चयनकर्ता का उपयोग करके a शैली को परिभाषित कर रहा हूँ। तो, मैं कह रहा हूं कि मैं सभी a पर एक हरे रंग की पृष्ठभूमि और लाल रंग डालना चाहता हूं जिसमें विशेषता not_custom नहीं है। इसके परिणामस्वरूप, आप देख सकते हैं कि टेस्ट 1, टेस्ट 3 और टेस्ट 5 में style परिभाषित होगा और स्टाइल के बिना टेस्ट 2, टेस्ट 4 और टेस्ट 6 सामान्य होंगे।

नोट: यदि आप विशेषता आप चाहते हैं परिभाषित कर सकते हैं। आपको not_custom नाम नहीं देना है। यदि आप चाहें तो इसे whatever कहा जा सकता है।

+0

जब आप HTML लिख रहे हों तो विशेषताओं को न बनाएं (जब तक कि आप HTML5 लिख रहे हों (भले ही यह अभी भी एक मसौदा है) और आप इसकी सीमाओं के अनुरूप हैं कि कस्टम विशेषताओं का नाम क्या हो सकता है (जो आप नहीं करते हैं)। नहीं 'वास्तव में गंभीर उपयोग के लिए पर्याप्त रूप से व्यापक रूप से समर्थित नहीं है (विशेष रूप से यदि आप विफल होने पर अपठनीय पाठ के साथ समाप्त होते हैं, जो इस स्थिति में हो सकता है) – Quentin

1

आप सीएसएस मूल्यों को भी पार करने के लिए आपको दो काम कर सकते हैं चाहते हैं: "महत्वपूर्ण" एक आप ओवरराइड या का उपयोग कर करना चाहते हैं के बाद नए सीएसएस घोषणाओं जोड़ने .. तो आपकी समस्या के लिए आप की कोशिश कर सकते हैं:

a.reset:hover { 
background-color: #FFFFFF; 
text-decoration: none; 
color: #000000; 
} 

.. और फिर लिंक आप इस नए वर्ग ओवरराइड करना चाहते जोड़ें:

<a href="#" class="reset">Link with reset</a> 

लेकिन इस सीएसएस कक्षा के बाद आप सामान्य "एक घोषित किया जाना चाहिए "टैग घोषणाएं या यह काम नहीं करेगा।

एक और तरीका उपयोग करना है! महत्वपूर्ण है लेकिन मैं इस का दुरुपयोग न करने की सलाह देता हूं। लेकिन ओवरराइड करने के लिए यह सबसे तेज और सबसे सुरक्षित तरीका सुनिश्चित करने के लिए है, यह काम करेगा:

a.reset:hover { 
background-color: #FFFFFF !important; 
text-decoration: none !important; 
color: #000000 !important; 
} 

.. और यह एक आप अपने सीएसएस फ़ाइल में कहीं भी जोड़ सकते हैं और उन शैलियों में "रीसेट" वर्ग मिल जाएगा के साथ किसी भी लिंक: सफेद पृष्ठभूमि, कोई पाठ सजावट और काले पाठ।

ओह और पृष्ठभूमि के लिए आप कैंडी कोशिश करें: पृष्ठभूमि: कोई नहीं; और सभी पृष्ठभूमि शैलियों को साफ़ कर देगा .. पृष्ठभूमि रंग, पृष्ठभूमि-छवि, आदि

एक साइड नोट के रूप में .. आईडी का उपयोग एक तत्व को संदर्भित करने के लिए किया जाता है और यह अद्वितीय होना चाहिए .. और कक्षाओं का उपयोग कई तत्वों के संदर्भ में किया जाता है । एक ही आईडी के एकाधिक उपयोग जैसे आप एक सीएसएस कक्षा का उपयोग करेंगे .. आप जावास्क्रिप्ट को तोड़ सकते हैं और यह आपके एचटीएमएल को मान्य नहीं करेगा।

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