सीएसएस: केवल <a> पर शैली लागू करें <img>

Question

मैं सूची में लिंक को कवर करने के लिए स्टाइल लागू करना चाहता हूं, लेकिन केवल <a> तत्व के अंदर छवि नहीं है।

<div id="leftcolumn"> 
    <ul> 
    <li><a href="http://google.com">google</a></li> 
    <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li> 
    </ul> 
</div> 

और मेरे सीएसएस:

div#leftcolumn ul a:hover{ 
    background-color: #F8F8F8; 
    color: Black; 
    border-bottom: 1px solid Black; 
} 

मैं इस सीएसएस की कोशिश की है, लेकिन कोई लाभ नहीं हुआ:

div#leftcolumn ul a:hover < img{ 
    background-color: #F8F8F8; 
    color: Black; 
    border-bottom: 1px solid Black; 
} 

यहाँ jsfiddle है

मार्कअप इस तरह है

Answer 1

मुझे शक है इस शुद्ध सीएसएस में संभव है: आप सीएसएस में यह बच्चों के आधार पर एक तत्व शैली नहीं दे सकते, आप क्या कर सकते <a> टैग कि छवि पकड़ और यह स्टाइल को रोकने के लिए एक विशेष वर्ग निर्दिष्ट करते हैं।

हालांकि, अगर आप एक <span> में पाठ लपेट सकता है और केवल वहाँ नियम लागू होते हैं, यानी कुछ की तरह:

<div id="leftcolumn"> 
    <ul> 
    <li><a href="http://google.com"><span>google</span></a></li> 
    <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li> 
    </ul> 
</div> 

सीएसएस:

div#leftcolumn ul a:hover > span { 
    background-color: #F8F8F8; 
    color: Black; 
    border-bottom: 1px solid Black; 
} 

Updated JSFiddle

Answer 2

<div id="leftcolumn"> 
     <ul> 
     <li><a href="http://google.com">google</a></li> 
     <li><a href="http://google.com" class="withImage"><img src="http://cso.cz/wpimages/cz2.gif"></a></li> 
     </ul> 
</div> 

div#leftcolumn ul a:not(.withImage):hover{ 
    background-color: #F8F8F8; 
    color: Black; 
    border-bottom: 1px solid Black; 
    border-top: 1px solid black; 
} 

Answer 3

जोड़ने .non-img ली जो आईएमजी एन के साथ है का उपयोग कर सीएसएस करें .non- img

div#leftcolumn ul li.non-img a:hover{ 
 
    background-color: #F8F8F8; 
 
    color: Black; 
 
    border-bottom: 1px solid Black; 
 
    border-top: 1px solid black; 
 
}

<div id="leftcolumn"> 
 
     <ul> 
 
     <li class="non-img"><a href="http://google.com">google</a></li> 
 
     <li><a href="http://google.com"><img src="http://cso.cz/wpimages/cz2.gif"></a></li> 
 
     </ul> 
 
</div>