2016-03-19 4 views
0

i am Hover-Effekt auf a Tag gelten nur wissen wollen dies möglich ist CSS nur diejenigen, die einen Tag anzuwenden, die kein Bild innerhalbCSS für einen Tag, aber kein Tag, das Bild enthalten

haben
<a href="#">link</a> 
<a href="#"><img src='abc.png'></a> 

a:hover,a:focus,.text-link:hover,.text-link:focus{ 
    background: #551011; 
    color: #8b6508; 
} 

das ist, was habe ich versucht, aber nicht

Arbeits
a:not(img):hover,a:not(img):focus,.text-link:not(img):hover,.text-link:not(img):focus{ 
    background: #551011; 
    color: #8b6508; 
} 

, was mache ich falsch

+0

Geben Sie Ihren Text, um die 'Text-link' Klasse verknüpfen und löscht die globalen a: hover/a: focus – Daniel

Antwort

0

Bitte versuchen Sie es wie folgt aus:

<!doctype html> 
<html> 
    <head> 
     <style> 
    a:not(.myimage):hover,a:not(.myimage):focus,.text-link:not(.myimage):hover,.text-link:not(.myimage):focus{ 
    background: #551011; 
    color: #8b6508; 
} 
</style> 
     </head> 

    <body> 
    <a href="#">link</a> 
<a class="myimage" href="#"><img src='abc.png'></a> 
    </body> 
</html> 
+0

ist dies jede Möglichkeit, dies ohne Bildklasse zu tun –

0

Sie nicht, uns den globalen Stil

a: hover, a: focus {}

Dies wirkt sich auf alle a-Tags. auf Ihrer Website. Verwenden Sie einen Bereich oder eine Klasse ... Wie Sie text-link Klasse. Löschen Sie den Rest.

.text-link:hover,.text-link:focus{ 
 
    background: #551011; 
 
    color: #8b6508; 
 
}
<a href="#" class='text-link'>link</a> 
 
<a href="#"><img src='http://files.dlink.com.au/website_images/baby_cam/gettingstarted_images/ABC_4.png' width="180px"></a>