सीएसएस :: बच्चे पैरेंट होवर पर रंग बदलने के लिए सेट है, लेकिन जब भी खुद को छुपाता है तो

Question

मेरे पास एक कोड है जिसमें <माता-पिता और < स्पैन > बच्चे के रूप में है। मैंने कुछ सीएसएस लिखा है जो माता-पिता के ऊपर आने पर बच्चे के सीमा रंग को बदलता है। जब मैं माता-पिता पर होवर करता हूं तो यह काम करता है, लेकिन अगर मैं बच्चे पर होवर करता हूं तो यह रंग बदलता है और इसे नहीं करना चाहिए।

एचटीएमएल

<a class="parent"> 
    Parent text 
    <span> 
     Child text 
    </span>  
</a> 

सीएसएस

.parent{ 
    padding:50px; 
    border: 1px solid black; 
} 

.parent span{ 
    position:absolute; 
    top:200px; 
    padding:30px; 
    border: 10px solid green; 
} 

.parent:hover span{ 
    border: 10px solid red; 
} 

यहाँ आप jsfiddle पर समस्या देख सकते हैं:: http://jsfiddle.net/vz9A9/

किसी को भी मदद कर सकता है इसे सुधारने में मेरी

यहाँ कुछ कोड सी कृप्या?

Answer 1

सीएसएस अधिलेखित किया जा सकता है।

डेमो:

.parent{ 
padding:50px; 
border: 1px solid black; 
} 

.parent span{ 
position:absolute; 
top:200px; 
padding:30px; 
border: 10px solid green; 
} 

.parent:hover span{ 
border: 10px solid red; 
} 

.parent span:hover{ 
border: 10px solid green; 
} 

Answer 2

आप पुराने ब्राउज़र को समर्थन के बारे में परवाह नहीं है, तो आप :not() उपयोग कर सकते हैं कि तत्व बाहर करने के लिए:

.parent:hover span:not(:hover) { 
    border: 10px solid red; 
} 

डेमो: http://jsfiddle.net/vz9A9/1/

आप उनका समर्थन करना चाहते हैं हैं, मुझे लगता है कि आपको या तो जावास्क्रिप्ट का उपयोग करना होगा या फिर सीएसएस गुणों को ओवरराइड करना होगा:

.parent span:hover { 
    border: 10px solid green; 
}