Css цвет ссылки при наведении: Как изменить вид ссылки при наведении на нее курсора мыши? — Вебджем.рф

Содержание

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

Тема:Ссылки

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+

Задача

Изменить цвет текстовой ссылки, когда на неё наводится курсор мыши и вернуть цвет обратно при уведении курсора.

Решение

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Цвет ссылок</title>
  <style>
   a {
    color: #008000; /* Цвет обычной ссылки */ 
    text-decoration: none; /* Убираем подчеркивание у ссылок */
   }
   a:visited {
    color: #800080; /* Цвет посещённой ссылки */
   } 
   a:hover {
    color: #800000; /* Цвет ссылки при наведении на нее курсора мыши */  
    text-decoration: underline; /* Добавляем подчеркивание */
   }
  </style>
 </head>
 <body>
  <p><a href="rome. html">Cras ingens iterabimus aequor</a> —
  завтра снова мы выйдем в огромное море.</p>
 </body>
</html>

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

Рис. 1. Вид ссылки при наведении на неё курсора мыши

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

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

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон под ссылками</title>
  <style>
   a {
    color: #000080; /* Цвет обычной ссылки */
    padding: 2px; /* Поля вокруг текста */
   }
   a:visited {
    color: #800080; /* Цвет посещенной ссылки */
   } 
   a:hover {
    text-decoration: none; /* Убираем подчеркивание */
    color: #fff; /* Цвет ссылки при наведении на нее курсора мыши */  
    background: #e24486; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="rome.
  html">Audaces fortuna juvat</a> - 
     счастье покровительствует смелым.</p>
 </body>
</html>

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

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

ссылки

HTML по теме

Тег <a>

CSS по теме

color
text-decoration
Псевдокласс :hover
Псевдокласс :visited

Ссылка меняет цвет при наведении — Dudom

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

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

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

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

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

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

В таблице стилей у ссылки есть специальный псевдокласс :hover . Он отвечает за стиль при наведении. Как только курсор будет убран с ссылки, она вернется в исходное состояние.

Примеры с изменением вида ссылки при наведении

Пример 1. Как изменить цвет и сделать подчеркивание при наведении

Преобразуется на странице в следующее:

Пример 2. Как изменить фон ссылки при наведении

Преобразуется на странице в следующее:

Пример 3. Как поменять курсор при наведении на ссылку

По умолчанию у ссылок курсор при наведении имеет значение cursor : pointer . В следующем примере мы изменим его на другой.

Преобразуется на странице в следующее:

Пример 4. Сглаженное изменение стилей ссылки

С помощью свойства transition мы сгладим скорость изменения фона и цвета ссылки.

+ Сделали отдельное видео посвященное цветам ссылок!

Цвет ссылки css

Цвет ссылки по умолчанию

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

Я пользуюсь подбором старым способом, который узнал ещё при царе горохе!

Но этот способ такой простой и надежный и не требует хождения по другим страницам и выяснения, как это работатет в той или иной программе, и чем еще хорош этот способ!? Вы просто изменяете в реальном времени цвети ссылки и вы сразу же сможете увидеть результат.

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

1. Нажимаем по ссылке ПКМ и выйдет новое окно — где ищем показать код и для Яндекс браузера и Google Chrome — быстро показать код — кнопка «F12»
2. Ищем в коде нашу ссылку — она справа показана — видим, что напротив нашей ссылки цвет — нажимаем по нему и выбираем в новом окне тот цвет, который нужен.

Цвет ссылки css

Рассмотрим несколько вариантов — как задать цвет ссылки:

Задать цвет только для этой ссылки

Как вы наверное увидели, то довольно странное поведение ссылки — это от того, что установленные свойства ссылки для всего сайта влияют и на данную ссылку.

Задать цвет ссылки через стили на странице

Результат : цвет ссылки через style на странице

Задать цвет ссылки через стили через файл css

В основном везде пользуются именно этим способом!

Если мы выведем здесь вот такой код? то увидим стили прописанные через файл css:

border-bottom: 1px solid #b3b3b3;

border-bottom: 1px solid #b3b3b300;

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

Лишь давайте сделаем быстрый пример, для того стиля. Что мы описали сверху и присвоим ему эффект при наведении на ссылку.

Берем тот же код, что шел выше добавляем ему «:hover» и в строке «color» — поставим, ну например красный.

Код ссылки не изменен

Цвет ссылки посещенной

Ну и собственно тоже самое, что и с верхнем кодом, изменяем вместо hover поставим «visited»

убрать синий цвет ссылки css

Как убрать синий цвет ссылки css!7 Для того, чтобы убрать синий цвет ссылки нужно задать ему любой другой цвет, либо через стили в теге, либо чрез ссы стили на странице, либо в файле css!

HTML/CSS — Цвет ссылки при наведении

Задавать вопрос

спросил 9 лет, 8 месяцев назад

Изменено 6 лет, 9 месяцев назад

Просмотрено 15 тысяч раз

Этот код написан в моем CSS; что делает все ссылки на моем сайте белыми, а при наведении на них они становятся серыми.

 a:ссылка {цвет: #FFFFFF}
а: активный {цвет: #383838}
a: посетил {цвет: #FFFFFF}
а: наведите {цвет: #383838}

Вот часть моего сайта, на которой есть белые ссылки, которые становятся серыми при наведении курсора. У меня есть четыре разные ссылки на сайте, разделенные знаком «|». . Я пытаюсь сделать каждую ссылку ОСТАВАТЬСЯ белой, но менять цвет HTML всякий раз, когда на них наводят курсор… чтобы соответствовать нашему логотипу. (HTML-раздел кода с моими ссылками прикреплен ниже).

Страница 1 | Страница 2 | Страница 3 | Страница 4

Я был бы рад, если бы кто-нибудь помог мне найти очень простой способ заставить каждую ссылку, страницу 1, страницу 2, страницу 3 и страницу 4, менять разные цвета HTML при наведении на них курсора. По сути, правило или что-то, в котором говорится, что ссылка с именем Страница 1 должна быть окрашена в #C7C025 при наведении курсора… а ссылка с именем Страница 2 должна быть окрашена в цвет #950285 при наведении курсора и так далее…

Большое спасибо заранее !!

html
css
цвета
наведение
шестнадцатеричный

Дайте своим ссылкам ID:

  my-website09090909. а>
Страница 2

А затем используйте этот css:

 #page1:hover { color: red; }
#page2:hover {цвет: синий; }
/* ... */

Просто есть родительский элемент и в соответствии с вашим родительским элементом попробуйте ниже:

Просто попробуйте это:

 
Страница 1
|
Страница 2
|
Страница 3
|
Страница 4

И CSS: