ein Wechsel: nach Stil, wenn das Kind img ist

Question

ich durch die Anwendung Inhalt mit der ein hovered Anker am Styling: nach Pseudo-Attribut, das unterhalb einer Grenze fügt hinzu:

a:hover { 
    position: relative; } 
    a:hover:after { 
     content: ''; 
     position: absolute; 
     left: 0; 
     display: inline-block; 
     height: 1em; 
     width: 100%; 
     border-bottom: 1px solid #a5cf4c; 
     margin-top: 0.5em; } 

Dies funktioniert gut, aber es gibt auch einige Anker um Bilder, und ich will nicht die Grenze unter ihnen. Für CSS würde dies nur mit dem nicht vorhandenen Eltern-Selektor a:after < img funktionieren. Ich habe versucht, es mit jQuery zu lösen, aber

Sie können nicht manipulieren: nach, weil es technisch nicht Teil des DOM ist und daher nicht durch JavaScript zugegriffen werden kann. Siehe Access the css ":after" selector with jQuery.

Ich sah einige Lösungen auf SO ohne die Elternhürde, aber ich komme damit nirgendwo hin. Jemand?

Answer 1

Sie könnten die after mit einer Klasse hinzufügen.

$('a:not(:has(img))').addClass('after-affect');

a:hover { 
 
    position: relative; 
 
} 
 
a.after-affect:hover:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    display: inline-block; 
 
    height: 1em; 
 
    width: 100%; 
 
    border-bottom: 1px solid #a5cf4c; 
 
    margin-top: 0.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Anchor with text --> 
 
<a href="#">test</a> 
 

 
<!-- Anchor with image --> 
 
<a href="#"> 
 
    <img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"/> 
 
    </a>