CSS：<a>の内側には適用されません<img>

Question

<a>要素の中にイメージがない場合にのみ、リスト内のホバリングされたリンクにスタイルを適用したいと思います。私はこのCSSを試してみましたが、無駄にしている

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です

<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> 

と私のCSS：

マークアップは、このようなものです

Answer 1

：あなたはCSSでそれの子に基づいて要素のスタイルを設定することはできません、何を行うことができますことは、画像を保持し、それをスタイリング防ぐ<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> 

CSS：

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

Updated JSFiddle

Answer 2

私は、これは純粋なCSSで可能である疑い

<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を追加 to li imgなし nを使用してください。.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>