Как изменить цвет фона текстовых ссылок при наведении курсора, но не ссылок на изображения

Непроверенная идея:

a:hover {background-color: #fff;}
img:hover { background-color: transparent;}

Следующее должно работать (непроверено):

Ты первый

 a:hover { background-color: #fff; }

Затем вы

a:imagelink:hover { background-color: inherit; }

Второе правило переопределит первое для <a class="imagelink" etc.> и сохранит цвет фона родителя.

Я попытался сделать это без class = "", но не могу найти селектор CSS, противоположный foo> bar, который стилизует панель, когда она является дочерним элементом foo. Вы хотели бы стилизовать foo, когда он имеет является дочерним элементом class bar. Вы можете делать это и даже более интересные вещи с помощью jQuery, но это может быть нежелательно в качестве общей техники.

вы можете использовать display: inline-block, но это не полностью кроссбраузерный. IE6 и ниже будут иметь проблемы с этим.

Я полагаю, у вас есть пробелы между <a> и <img>? попробуйте удалить это вот так:

<a><img /></a>

Меня смущает то, что вы называете «ссылками на изображения» ... это тег img внутри привязки? Или вы устанавливаете изображение в CSS?

Если вы устанавливаете изображение в CSS, то здесь нет проблем (поскольку вы уже можете настроить его таргетинг) ... поэтому я должен предположить, что вы имеете в виду:

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

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

a:hover { background: SomeColor }
a:hover img { background-color: #fff; }

Я попытался найти какой-то селектор, который бы получал только элементы <a>, у которых нет потомков <img>, но не нашел ... Что касается изображений с этим нижним промежутком, вы можете сделать следующее:

a img{vertical-align:text-bottom;}

Это должно избавить от фона, появляющегося за изображением, но может нарушить макет (правда, не намного), так что будьте осторожны.

Для прозрачных изображений вы должны использовать класс.

Я очень надеюсь, что это решено в CSS3 путем реализации родительского селектора.

Я обычно делаю что-то вроде этого, чтобы убрать пробел под изображениями:

img {
  display: block;
  float: left;
}

Конечно, это не всегда идеальное решение, но в большинстве ситуаций оно подходит.

У меня была эта проблема сегодня, и я использовал другое решение, чем display: block, благодаря ссылке от спрашивающего. Это означает, что я могу сохранить ссылку ТОЛЬКО на изображении и не расширять ее до контейнера.

Изображения встроены, поэтому под ними есть место для нижней части букв, таких как «y, j, g». Это позиционирует образы в baseline, но вы можете изменить его, если у вас нет <a>TEXT HERE</a>, как с логотип. Однако вам все равно нужно замаскировать пространство текстовой строки, и это легко, если вы используете простой цвет в качестве фона (например, в body или div#wrapper).

body {
  background-color: #112233; 
}
a:hover {
  background-color: red;
}
a img {
  border-style: none; /* not need for this solution, but removes borders around images which have a link */
  vertical-align: bottom; /* here */
}
a:hover img {
  background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}

Этот способ работает лучше.

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    background-color: transparent;
    }

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

http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/

У меня такая же проблема. В моем случае я использую изображение в качестве фона. Я сделал следующее, и моя проблема была решена:

background-image: url(file:"use the same background image or color");