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

Question

У меня есть такое правило CSS:

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

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

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

a.imagelink:hover { background-color: transparent; }

Сегодня я искал более элегантное решение этой проблемы, когда наткнулся на это .

По сути, он предлагает использовать display: block, и это действительно решает проблему непрозрачных изображений. Однако это приводит к другой проблеме: теперь ссылка такая же широкая, как и абзац, хотя изображение и не так.

Есть хороший способ решить эту проблему, или мне снова нужно использовать грязный подход?

Спасибо

Answer 1

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

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

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

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

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

Answer 2

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

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/

Answer 3

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

img {
  display: block;
  float: left;
}

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

Answer 4

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

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

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

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

У меня была эта проблема сегодня, и я использовал другое решение, чем display: block, благодаря ссылке на asker. Это означает, что я могу сохранить ссылку ONLY на изображении и не развернуть ее до контейнера.

Изображения встроены, поэтому под ними есть место для нижней части букв, таких как "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 */
}

Answer 8

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

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

<a><img /></a>

Answer 9

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

Сначала ты

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

Тогда ты

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

Второе правило переопределяет первое для И сохраняет цвет фона родительского элемента.

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