Вероятно, довольно простая проблема CSS

Question

У меня есть это CSS-правило для получения эффекта «нажатие» на нажатые ссылки:

a:active {
    position: relative;
    top: 1px;
}

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

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

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

Спасибо.

Answer 1

Вы можете обратить эффект на ребенка:

a:active img {
    position: relative;
    top: -1px;
}

Answer 2

Я не пробовал это, но я думаю, что это должно работать.

a:active {
    position: relative;
    top: 1px;
}

a:active img{
    position: relative;
    top: -1px;
}

Другое решение - добавить класс ко всем тегам a, которые содержат изображения

Answer 3

Полагаю, вы могли бы изменить свой первоначальный стиль на:

a {
    padding-bottom: 1px;
}

a:active {
    padding-top: 1px;
    padding-bottom: 0;
}

, а затем использовать его для изображения:

a:active img {
    position: relative;
    top: -1px;
}

У вас еще не было возможности проверить егоно я думаю, что это должно сделать это.

Answer 4

К сожалению, пока нет селектора, который бы отличал текстовые ссылки от ссылок на изображения.Однако вы можете избежать неприятностей с этим:

p a:active {
    position: relative;
    top: 1px;
}

Если все ваши ссылки содержатся в тегах абзаца, это будет работать и не повлияет на теги изображений.Вы можете создать его для H1, H2 и т. Д. Для любых тегов, которые нужно включить.