Я хотел бы иметь возможность нацеливать текстовые ссылки в 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). Возможно, нет способа... но любая помощь или идеи, которые у вас есть, будут очень благодарны!
Извините, что вы хотите: какой-то родительский псевдокласс, который выбирает дочерний элемент, но относится к родительскому объекту, которого, к сожалению, не существует (даже в CSS3).
Вам нужно будет сделать несколько Javascript, выбрав все элементы, соответствующие #sidebar a: hover, затем применив красную нижнюю границу при условии, что у них нет дочернего IMG-элемента.
Что касается 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;
}
Вы не можете настроить таргетинг на элемент в зависимости от того, какие дочерние элементы у него есть, поэтому вам нужно будет добавить что-то в код для таргетинга на разные ссылки.
Не можете ли вы использовать подчеркивание вместо нижней границы? Это будет работать так, как оно применяется к тексту в ссылке, а не к самому элементу ссылки.
#sidebar a:hover { text-decoration: underline; }
#sidebar a:hover img { text-decoration: none; }
Это может работать
a img {position:relative; top: Npx}, where N is the hover border thickness
Это заставит изображение покрыть границу, хотя оно будет смещено вниз на пиксель или так постоянно.
Попробуйте этот трюк. Он работает.
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);
Его возможно с помощью css3 с помощью a:not(img) a:hover {style:whatever;}, но есть соображения. Вот объяснение с изображениями: http://nerdinprogress.blogspot.com/2010/11/target-text-links-but-not-images-with.html
Простым способом является использование
:hover (text-decoration: underline}
Также см.
text-underline-position
Это невозможно с чистым CSS без добавления новых тегов. Чтобы сделать это с помощью чистого CSS/HTML, вам нужно добавить тег к ссылке изображения [a href].. или добавить тег к [hrer] ссылкам, которые вы хотите отобразить с подчеркиванием.
Вы можете написать небольшой фрагмент кода в javascript, который бы довольно легко изменил свойство границы элемента при наведении. Вам просто нужно проверить, является ли элемент IMG.
На самом деле это довольно сложная проблема. У вас есть возможность изменить код CMS? Становится легко, если вы можете сделать что-то вроде wrap <span> вокруг любого текста внутри ссылок (и оставить изображения за пределами них). Затем все, что вам нужно сделать, это target #sidebar a:hover span, чтобы иметь границу.
Если вы не можете изменить код, я не уверен, что это возможно. Я ничего не могу придумать.