Измените стиль: after, если дочерний элемент img

Я создаю зависающий якорь, применяя контент с помощью: a : hover { position : relative ; } a : hover : after { content : '' ; позиция : абсолютная ; left : 0 ; display : inline - block ; высота : 1м ; ширина : 100 %; Граница - снизу : 1px solid # a5cf4c; margin - top : 0.5em ; } псевдо атрибут, который добавляет границу под: 

a:after < img

Это прекрасно работает, но вокруг изображений есть некоторые якоря, и я не хочу, чтобы граница была под ними. Для CSS это будет работать только с несуществующим родительским селектором after. Я попытался решить это с помощью jQuery, но

Вы не можете манипулировать: после, потому что он не является технически частью DOM и поэтому недоступен для любого JavaScript. См. Раздел Доступ к css ": after" с помощью jQuery .

Я посмотрел некоторые решения на SO без родительского препятствия, но я не могу ни с чем с этим справиться. Кто-нибудь?

javascript,jquery,css,

1

Ответов: 1

2 принят

Вы можете добавить afterкласс с классом.

$('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>

JavaScript, JQuery, CSS,
Похожие вопросы
Яндекс.Метрика