Как я могу установить определенные классы CSS для ссылок, которые являются изображениями?

Question

Это кажется до боли простым, но я не могу понять, как это сделать:

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

a:hover {
 /*style goes here*/
}

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

a:hover img {
 /*reset style*/
}

не работает. Что я должен попробовать вместо этого?

Answer 1

Ваша попытка рестайлинга элемента изображения, а не элемента a, поэтому он не работает (см. здесь для объяснения синтаксиса селектора CSS). К сожалению, нет синтаксиса для выбора родительского элемента, поэтому, как говорили другие, вам придется создать специальный класс для ссылок на изображения.

Answer 2

Единственный способ сделать это - поместить класс в a s, который включает img s, вот так:

<a href="link.htm" class="imagelink"><img src="image.jpg" alt="Image" /></a>

А затем выберите его в CSS с помощью

a.imagelink:hover {
    /* styles */
}

Answer 3

Для ссылок, которые являются изображениями, используйте другой класс CSS вместо ссылки на все теги привязки.

Answer 4

Попробуйте это:

a:hover {
 /*link style goes here*/
}

Выберите все изображения со ссылками при наведении курсора и установите другой стиль.

a:link:hover img {
    /* hovered, linked image styles */
}

При этом будут выбраны только те изображения, на которые есть ссылки и которые находятся над ними.

Работает и в Weebly.