CSS-целевые текстовые ссылки с нижней границей при наведении, но ссылки на изображение без рамки

Я хотел бы иметь возможность нацеливать текстовые ссылки в CSS с помощью border-bottom на hover, но все ссылки, на которых есть изображения, не имеют границы при наведении. Итак:

<a href="#"><img src="image.png"  /></a>  ==> this should not have a bottom-border on hover
<a href="#">regular text link</a> ==> this should have a bottom-border on hover

Я пробовал этот CSS:

#sidebar a:hover {
  border-bottom: 1px dotted red;
}
#sidebar a:hover img {
  border-bottom: none;
}

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

Но я не могу использовать эти решения, поскольку содержимое находится в CMS, поэтому я не хочу, чтобы пользователь должен был назначать класс для каждого вставляемого ими изображения. И display: block не будет работать, потому что я не знаю, подходит ли это для каждого изображения, которое пользователь хочет отобразить.

Наконец, я хотел бы сделать это в простом CSS (без Javascript). Возможно, нет способа... но любая помощь или идеи, которые у вас есть, будут очень благодарны!

ОТВЕТЫ

Ответ 1

Извините, что вы хотите: какой-то родительский псевдокласс, который выбирает дочерний элемент, но относится к родительскому объекту, которого, к сожалению, не существует (даже в CSS3).

Вам нужно будет сделать несколько Javascript, выбрав все элементы, соответствующие #sidebar a: hover, затем применив красную нижнюю границу при условии, что у них нет дочернего IMG-элемента.

Ответ 2

Что касается JavaScript, Id предлагает использовать jQuery, чтобы добавить класс ко всем ссылкам, содержащим изображение:

$('#sidebar a:has(img)').addClass('image-link');

(Селектор :has - это вещь jQuery, она не присутствует в CSS.)

Затем соответствующим образом настройте таблицу стилей.

#sidebar a:hover {
  border-bottom: 1px dotted red;
}
#sidebar a.image-link:hover {
  border-bottom: none;
}

Ответ 3

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

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

#sidebar a:hover { text-decoration: underline; }
#sidebar a:hover img { text-decoration: none; }

Ответ 4

Это может работать

a img {position:relative; top: Npx}, where N is the hover border thickness

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

Ответ 5

Попробуйте этот трюк. Он работает.

a { text-decoration:none; border-bottom:2px solid; }

a img { border:none; vertical-align:top; }

Другой способ - PHP:

$text = preg_replace('#<a(.*?)<img(.*?)/>(.*?)</a>#is', "<a class='imgshow' \\1 <img\\2 />\\3</a>", $text);

Ответ 8

Это невозможно с чистым CSS без добавления новых тегов. Чтобы сделать это с помощью чистого CSS/HTML, вам нужно добавить тег к ссылке изображения [a href].. или добавить тег к [hrer] ссылкам, которые вы хотите отобразить с подчеркиванием.

Вы можете написать небольшой фрагмент кода в javascript, который бы довольно легко изменил свойство границы элемента при наведении. Вам просто нужно проверить, является ли элемент IMG.

Ответ 9

На самом деле это довольно сложная проблема. У вас есть возможность изменить код CMS? Становится легко, если вы можете сделать что-то вроде wrap <span> вокруг любого текста внутри ссылок (и оставить изображения за пределами них). Затем все, что вам нужно сделать, это target #sidebar a:hover span, чтобы иметь границу.

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