अभिभावक पर होवर मार्क टैग सीएसएस

Question

पर प्रभाव नहीं डालता है मैं एक पैर टैग में एक पैरेंट कंटेनर, जैसे div या एंकर से होवर शैली कैसे लागू कर सकता हूं? मुझे पता है कि यह माता-पिता के अंदर घूमने वाले अन्य तत्वों के लिए डिफ़ॉल्ट व्यवहार है। हालांकि, जब मैं मार्क टैग का उपयोग करता हूं तो यह मेरे लिए काम नहीं कर रहा है।

यहां तीन उदाहरण हैं, 1) चिह्न के साथ div, 2) चिह्न के साथ एंकर, 3) अवधि के साथ एंकर। यदि आप माता-पिता को होवर करते हैं, लेकिन बच्चे के बाहर, यह अवधि बदलता है, लेकिन निशान नहीं।

<div> 
    Outside div <mark>inside mark</mark> 
</div> 

<a> 
    Outside anchor <mark>inside mark</mark> 
</a> 
<br> 
<a> 
    Outside anchor <span>inside span</span> 
</a> 

https://jsfiddle.net/ku6drqt5/

मैं पता है कि मार्क टैग जाता है कि काम करने से इस को रोकने, और मैं इसे कैसे सही कर सकता है के बारे में क्या खास बात है अच्छा लगेगा। अन्यथा, सरल कामकाज का स्वागत है।

नोट: मैं क्रोम v48 का उपयोग कर रहा हूं।

Answer 1

ऐसा प्रतीत होता है कि रंग विशेष रूप से mark तत्व पर सेट होना चाहिए क्योंकि यह सीधे विरासत में नहीं है। यूसुफ की टिप्पणी

बस के रूप में डिफ़ॉल्ट पृष्ठभूमि रंग yellow है ... mark तत्व के लिए डिफ़ॉल्ट ब्राउज़र/उपयोगकर्ता-एजेंट के रूप में colorblack

सेट कर दिया जाता

प्रति *।

^{* यह क्रोम, फ़ायरफ़ॉक्स और आईई के लिए सहमत डिफ़ॉल्ट दिखाई देता है हालांकि मैं इस मामले के लिए आवश्यकता का पता नहीं लगा सकता।}

तो जब आप अभिभावक को बदलते हैं: होवर रंग, उपयोगकर्ता एजेंट स्टाइल अभी भी अधिक विशिष्ट है। तो यह रंग माता पिता पर निर्दिष्ट विरासत <span>, एक रंग सेट नहीं है: मंडराना

का संभावित हल

.parent:hover { 
 
    color: red; 
 
} 
 
.parent:hover mark { 
 
    color: currentColor; /* or inherit as noted in the other answer */ 
 
}

<div class="parent"> 
 
    Outside div 
 
    <mark>inside mark</mark> 
 
</div> 
 

 
<a class="parent"> 
 
    Outside anchor <mark>inside mark</mark> 
 
</a> 
 
<br> 
 
<a class="parent"> 
 
    Outside anchor <span>inside span</span> 
 
</a>

---

आपकी आवश्यकता के आधार पर आप हो सकता है के लिए करना चाहते इसे अपने सीएसएस रीसेट में जोड़ें।

mark { 
    color:inherit; 
} 

JSfiddle

Answer 2

इस पर निर्भर करता है कि कैसे अपने उपयोगकर्ता एजेंट (ब्राउज़र) शैलियों <mark> तत्व। क्रोम इन चूक है:

.parent:hover mark { 
    background-color: inherit; 
    color: inherit; 
}