удалить подчеркивание ссылки из изображения, только если тег привязки содержит изображение - PullRequest
Новая
       25

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

5 голосов
/ 30 января 2012 
<a href="#">
        <img width="103" height="100"  src="img source">
    </a>

для приведенного выше HTML-кода я использую следующий CSS 

a {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

a img {
    border: 0 none;
}

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

Может кто-нибудь предложить обойти это?

Ответы [ 5 ]

9 голосов
/ 02 июня 2012

После долгих поисков, я наконец-то нашел интересный трюк, который работал для меня: 

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

Почему это работает?

По умолчанию обаякоря и изображения являются встроенными элементами и, применяя вертикальное выравнивание: верх;к изображению внутри якоря, мы перемещаем якорь к вершине изображения.По какой-то причине изображения имеют более высокий z-индекс, чем якоря.

Источник: Удаление границы из ссылок на изображения

Кстати, это будет прекрасно работать сродительский селектор, такой как a < img ... к сожалению, он еще не реализован, но работает.Посмотрите здесь: https://stackoverflow.com/a/45530/114029

3 голосов
/ 30 января 2012

Подчеркивание вызвано оформлением текста на a. Так что просто примените text-decoration:none к a.

Редактировать : в настоящее время нет единственного способа CSS применить стиль к «любому a, который имеет img в качестве дочернего элемента». У CSS нет селекторов для этого. Таким образом, вам придется либо сделать эти a уникальными, дав им классы (или другие атрибуты), и применить CSS к этим классам, либо запустить какой-нибудь скрипт, который проверяет img s за a с a s желаемый стиль.

0 голосов
/ 19 июля 2013

Я решил это с помощью jquery, просто связав jquery.js в голове и поместив это в тело: 

    <script type="text/javascript">

        $("body").ready(function () {

                $("a").has("img").addClass("imglink");

        });
</script>

Затем стилизуем класс a.imglink

0 голосов
/ 30 января 2012

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

jQuery(document).ready(function($) {
    var a_with_img = $('a').children()
    $(a_with_img).parent().css('text-decoration', 'none');
});

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

0 голосов
/ 30 января 2012

Вы можете использовать CSS Descendent Selector

Итак, в вашем случае: 

a > img { text-decoration: none; }

Однако вышеприведенное правило добавит стиль к изображению (то есть потомку), а не к родительскому элементу, поэтому он может быть не тем, что вы ищете. К сожалению, нет правила CSS, которое применяет стилизацию к родителю в случае потомка.

...