css a: текст в стиле ссылки и изображения - PullRequest
Новая
       26

css a: текст в стиле ссылки и изображения

6 голосов
/ 22 сентября 2010

У меня есть быстрые css-вопросы, которые меня беспокоят, и я не могу понять, прямо сейчас.

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

Вот то, что у меня сейчас есть. 

#main a:hover {
    border-bottom:solid 1px #7b9a04;
    color:#333;
}

img, img a:hover {
    border-bottom:none;
}

Однако это не похоже на работу.Я не думаю, что это какой-либо другой стиль, переопределяющий его, потому что, если я уберу стиль #main a: hover, у изображений больше не будет нижней границы, но ни одна из других ссылок на сайте не сделает этого.

Ответы [ 4 ]

5 голосов
/ 23 мая 2011

Проблема связана с элементом ссылки <a>, а не с самой ссылкой изображения. Когда вы задаете нижнюю границу для состояния наведения <a>, она также применяется к ссылке, содержащей изображение. Поэтому, когда вы наводите указатель мыши на такую ​​ссылку (содержащую изображение), это ссылка, которая показывает нижнюю границу. Не изображение.

Хотя это можно исправить. Попробуйте применить: 

a img {
    display: block;
    }

Это сбросит стиль <a>. Для этого метода есть одна оговорка & mdash; использование этого со встроенными изображениями может нарушить макет. Так что используйте это экономно.

0 голосов
/ 21 августа 2016

Как насчет 

a[href$=jpg]:hover, 
a[href$=jpeg]:hover, 
a[href$=png]:hover, 
a[href$=gif]:hover {
        text-decoration: none;
        border: 0;
        border: none;
        }
0 голосов
/ 22 сентября 2010

как насчет явного определения изображений без границ после объявления при наведении? 

#main a:hover {
  border-bottom: solid 1px #7b9a04;
}

img {
  border: none;
}
0 голосов
/ 22 сентября 2010

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

Кроме того, нет необходимости разделять p и td следующим образом:это. 

#main a {
    color:#7b9a04;
    text-decoration:none;
}

#main a:hover {
    color:#333;
    border-bottom:solid 1px #7b9a04;
}

Это действительно все, что вам нужно.

...