Как изменить вид ссылки

Как изменить цвет ссылки при наведении?

Для изменения цвета текстовой ссылки при наведении на неё курсора мыши применяется псевдокласс :hover, который добавляется к селектору A . Сперва через селектор A задаём цвет обычных ссылок, затем с помощью :hover задаём цвет ссылок при наведении (пример 1).

Пример 1. Изменение вида ссылки

В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки не будут менять свой цвет.

Вид ссылки при наведении

Рис. 1. Вид ссылки при наведении

Аналогично можно поменять и цвет фона под ссылкой при наведении на неё, добавив свойство background к селектору a:hover , как показано в примере 2.

Пример 2. Изменение цвета фона ссылки

Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding.

Изменение цвета фона ссылки

Рис. 2. Изменение цвета фона ссылки

См. также

:focus на мобильных устройствах
background
color
currentColor
text-fill-color
Анимация ссылок при наведении
Атрибут link
Виды ссылок
Всплывающая подсказка
Единицы цвета в CSS
Использование :hover
Линейный градиент
Наследование в CSS
Несколько фоновых картинок
Нормальное позиционирование
Переходы с помощью :hover
Подсветка строк и колонок таблицы
Псевдокласс :hover
Псевдоклассы в CSS
Работа с типографикой
Селекторы CSS
Состояния кнопок
Сочетание с псевдоклассами
Спрайты
Типы ссылок
Установка фона и градиента
Фоновая картинка

Изменение типа ссылки: относительная, абсолютная, смешанная

По умолчанию ссылка на ячейку является относительной ссылкой, которая означает, что ссылка относительна к расположению ячейки. Например, если вы ссылаетесь на ячейку A2 из ячейки C2, вы фактически ссылаетесь на ячейку, которая находится на два столбца слева (C минус A) в одной строке (2). При копировании формулы, содержаной относительную ссылку на ячейку, эта ссылка в формуле изменится.

Например, при копировании формулы =B4*C4 из ячейки D4 в D5 формула в ячейке D5 корректируется на один столбец вправо и становится =B5*C5. Если вы хотите сохранить исходную ссылку на ячейку в этом примере при копировании, необходимо сделать ссылку на ячейку абсолютной, предшествуя столбцам (B и C) и строке (2) знаком доллара($). Затем при копировании формулы =$B$4*$C$4 из D4 в D5 формула остается той же.

Относительная ссылка на ячейку

В меньшей степени может потребоваться смешанные абсолютные и относительные ссылки на ячейки, предшествуя столбецу или значению строки знаком доллара, что исправит столбец или строку (например, $B 4 или C$4).

Чтобы изменить тип ссылки на ячейку, выполните следующее.

Выделите ячейку с формулой.
В строке формул строка формул выделите ссылку, которую нужно изменить.
Для переключения между типами ссылок нажмите клавишу F4. В приведенной ниже таблице по сумме обновляется тип ссылки при копировании формулы, содержащей ссылку, на две ячейки вниз и на две ячейки справа.

Копируемая формула

Первоначальная ссылка

Новая ссылка

$A$1 (абсолютный столбец и абсолютная строка)

$A$1 (абсолютная ссылка)

A$1 (относительный столбец и абсолютная строка)

C$1 (смешанная ссылка)

$A1 (абсолютный столбец и относительная строка)

$A3 (смешанная ссылка)

A1 (относительный столбец и относительная строка)

C3 (относительная ссылка)

Изменить вид ссылок

маленький вопрос: по поводу ссылок по тексту: в файле style.css есть строка: на сайте есть текст, двух видов: 1. мама мыла раму 2. мама дома моет рамы встал вопрос: как сделать так, что бы текст указанный в 1 пункте, не выделялся, а активная ссылка выделялась. такое возможно? пример: мама мыла раму, мама дома моет рамы, при наведении на ссылку: мама дома моет рамы заранее спасибо! ps. если вдруг не в той ветке задал вопрос, прошу указать где можно такой вопрос задать.

На сайте с 03.11.2008
18 мая 2020, 07:56

krilovsky68:
: как сделать так, что бы текст указанный в 1 пункте, не выделялся, а активная ссылка выделялась.
такое возможно?

Правильнее — изменить a на span например. Но можно смотреть по наследованию.

Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.

На сайте с 30.09.2016
18 мая 2020, 08:16
a
a[href]:hover
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
На сайте с 03.11.2008
18 мая 2020, 08:19
Sitealert:
Присвоить активной ссылке класс active,
Насколько я понял ТСа интересует разница с href.
На сайте с 30.09.2016
18 мая 2020, 08:25
SeVlad:
Насколько я понял ТСа интересует разница с href.
Да, исправил. Меня сбило с толку слово «активная», это немного другое.
На сайте с 08.08.2019
18 мая 2020, 09:53
Sitealert:
a
a[href]:hover

попробовал не получилось. возможно будет правильнее показать: страница: https://krilovsky.ru/dlya-fizicheskih-lits/ на ней есть текст двух видов. там есть предложение: Раздел сайта «Для физических лиц» ориентирован на граждан, которым требуется квалифицированная юридическая помощь — помощь адвоката. в нем как раз не хотелось бы что бы текст выделялся другим цветом. далее: В разделе «Для физических лиц» мной освещены следующие вопросы: — административные дела — военные споры (военный адвокат) а тут хотелось бы что бы было видно что это ссылка) ссылки с переходами выделялись синим цветом, а просто текст с комментариями не выделялся. (чувствую что не совсем верно объясняю. ) попробовал в файл style.css написать: a a[href] a[href]:hover в принципе получилось как хотел) но на 90% уверен, что не правильно

На сайте с 20.04.2007
18 мая 2020, 10:17
krilovsky68:
в нем как раз не хотелось бы что бы текст выделялся другим цветом.

А зачем в таком случае вставлять ссылку вообще? И да, вторая ссылка при клике на неё не реагирует.. т.е. она, как бы тоже «без перехода» ) Можно прямо в стиль элемента прописать

a[href=""], a[href="#"] color:#..; 
text-decoration:none;
>

. 🙂 Облачные серверы от RegRu — промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
На сайте с 08.08.2019
18 мая 2020, 10:33
ivan-lev:
Можно прямо в стиль элемента прописать

a[href=""], a[href="#"] < 
color:#..; 
text-decoration:none; 
>

я не совсем понимаю, как это сделать — я не программист. 1. ссылка административные дела 2. ссылка военные споры (военный адвокат) текст без ссылки: Раздел сайта «Для физических лиц» ориентирован на граждан, которым требуется «Для физических лиц» — помощь адвоката. хотелось бы что бы при наведении на текст без ссылки «Для физических лиц» только отображался скрытый текст (цвет не менялся). в вот ссылки: адвокат по административным делам в Тамбове адвокат по военным делам в Тамбове были активными и выделялись как положено (по тексту синим цветом, а при наведении подчеркивание) так можно сделать? или очень сложно? огромное спасибо за внимание к моему вопросу.

Как изменять внешний вид ссылок?

Как надо написать в CSS чтобы сделать допустим для первой ссылки в обычном состоянии чтобы не было подчёркивающей линии и цвет был чёрный. А для второй в обычном виде всё стандартно, но при наведении на неё курсора допустим она становилась зелёной?

Отслеживать
задан 8 апр 2019 в 16:42
82 9 9 бронзовых знаков
8 апр 2019 в 17:00

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

#a1 < text-decoration: none; color: black; >#a2:hover

Отслеживать
ответ дан 8 апр 2019 в 18:51
36 1 1 бронзовый знак

css
ссылки

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.