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

Question

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

<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). Возможно, нет никакого пути ... но любая помощь или идеи, которые у вас есть, будут высоко оценены!

Answer 1

Что касается JavaScript, я бы предложил использовать 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;
}

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

Это возможно с помощью css3, используя a:not(img) a:hover {style:whatever;}, но есть некоторые соображения. Вот объяснение с изображениями: http://nerdinprogress.blogspot.com/2010/11/target-text-links-but-not-images-with.html

Answer 6

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

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); 

Answer 7

Простой способ использования

:hover (text-decoration: underline}

Также см.

text-underline-position  

http://dev.w3.org/csswg/css3-text/#text-underline-position0

Answer 8

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

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

Answer 9

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

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