Переопределить привязку> Поведение изображения с помощью CSS

Question

Примечание : я задавал аналогичный вопрос 5 минут назад, однако это не то же самое ...

У меня есть это CSS-правило для подчеркивания ссылок, не затрагивая ни одно избуквы "foots":

a:hover, a:focus, a:active {
    color: #3b234a;
    border-bottom: 1px #ccc solid;
}

Теперь это работает, как и ожидалось, однако я хочу написать правило, которое отключает это поведение на связанных изображениях, как это:

<a href="#"><img src="..." /></a>

Возможно ли это?

Спасибо.

Answer 1

Добавьте класс «imageLink» или все, что вам нравится, к якорям, которые содержат изображения:

a:hover, a:focus, a:active {
  color: #3b234a;
  border-bottom: 1px #ccc solid;
}

a.imageLink:hover, a.imageLink:focus, a.imageLink:active {
   border-bottom: none;
}

Answer 2

Примените класс к своему href и удалите границу этого класса.

По сути, вам всегда придется приходить к этому с учетом родительского элемента, потому что это направление, в котором анализируется CSS.

Вы можете двигаться назадот дочернего к родительскому, если вы используете jQuery или подобное, но ванильный CSS не может справиться с тем, что вы хотите, чтобы он делал в этой ситуации.

Answer 3

Попробуйте

a:hover img { border-bottom: none; }