CSS: applicare lo stile solo su <a> senza interno <img>

Vorrei applicare lo stile ai collegamenti in bilico in un elenco, ma solo se non c'è immagine all'interno dell'elemento <a>.CSS: applicare lo stile solo su <a> senza interno <img>

Il markup è come questo:

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

e il mio css:

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

Ho provato questo css, ma senza alcun risultato:

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

Ecco la jsfiddle

fonte

2016-01-05 Zbynek

State costretto a questo HTML? In caso contrario, è possibile avvolgere il testo in un '' e applicare le regole lì. –

Hai provato 'a: not (a img): hover {...}' - non verificato –

@DarrenSweeney Pseudo selettore: not() non accetta il selettore complesso in esso. –

dubito che questo è possibile in puro CSS.

Tuttavia, si potrebbe disporre il testo in un <span> e si applicano solo le regole c'è, vale a dire qualcosa come:

<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

fonte

2016-01-05 09:11:12

Questo è buono, ma se non ci sono span ho può farlo funzionare? –

È impossibile. –

Non è possibile lo stile di un elemento basato su di esso per bambini nei CSS, che cosa si può fare è assegnare una classe speciale per <a> tag che contengono l'immagine e impediscono lo styling:

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

fonte

2016-01-05 09:11:07 KAD

se stai per mettere un corso sull'ancora, perché non metterlo solo su quello con testo e destinazione piuttosto che su quello con l'immagine e non mirando a quello? – Pete

Bene entrambi funzionano .. – KAD

aggiungere .Non-img a li che è senza img n fare css con l'utilizzo di .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>

fonte

2016-01-05 09:14:54

CSS: applicare lo stile solo su <a> senza interno <img>

risposta

Problemi correlati