Ссылка при наведении css: Изменение цвета ссылки при наведении курсора — Вопрос от Владимир Шкода

21.06.1987 alexxlab

Содержание

html — При наведении на ссылку скачет текст

Сделал так, чтобы при наведении на ссылку, снизу появлялось подчеркивание. Но почему-то текст скачет при наведении. В чем причина ?

body{
	font-family: 'Montserrat', sans-serif;
}

.navbar-nav li{
	margin-left: 35px;
	font-size: 20px;
}

header .nav-item a {
	color: #6c6c6c;
}

header .nav-item a:hover {
	border-bottom: 3px solid #5094f2;

}

.navbar-toggler{
	background-color: #5094f2;
}

.fa-bars{
	font-size: 25px;
	color: #fff;
}

<!doctype html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Prechu</title>

    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fontawesome-free-5.  9.0-web/css/all.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">

  </head>
  <body>

    <header>
      <div>
        <nav>
          <a href="#">
            <img src="img/logo.png" alt="logo">
          </a>
          <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span><i></i></span>
          </button>

          <div>
            <ul>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Products</a>
              </li>
              <li>
                <a href="#">Services</a>
              </li>
              <li>
                <a href="#">Contact</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>

    <script src="https://code.   jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
  </html>

html
css
bootstrap

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

body {
  font-family: 'Montserrat', sans-serif;
}

.navbar-nav li {
  margin-left: 35px;
  font-size: 20px;
}

header .  nav-item a {
  color: #6c6c6c;
  border-bottom: 3px solid transparent;
}

header .nav-item a:hover {
  border-bottom: 3px solid #5094f2;
}

.navbar-toggler {
  background-color: #5094f2;
}

.fa-bars {
  font-size: 25px;
  color: #fff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <!doctype html>
  <html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Prechu</title>

    <link href="https://fonts.  googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fontawesome-free-5.9.0-web/css/all.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">

  </head>

  <body>

    <header>
      <div>
        <nav>
          <a href="#">
            <img src="img/logo.png" alt="logo">
          </a>
          <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span><i></i></span>
            </button>

          <div>
            <ul>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">Products</a>
              </li>
              <li>
                <a href="#">Services</a>
              </li>
              <li>
                <a href="#">Contact</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>

    <script src="https://code.    jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </body>

  </html>

</body>

</html>

Текст скачет по причине border-bottom: 3px solid #5094f2; по ховеру. Хочешь что б не скакал пиши, так

body {
  font-family: 'Montserrat', sans-serif;
}

.navbar-nav li {
  margin-left: 35px;
  font-size: 20px;
}

header . nav-item a {
  color: #6c6c6c;
  border-bottom: 3px solid #fff;
}

header .nav-item a:hover {
  border-color: #5094f2;
}

.navbar-toggler {
  background-color: #5094f2;
}

.fa-bars {
  font-size: 25px;
  color: #fff;
}

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fontawesome-free-5.9.0-web/css/all.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">

<header>
  <div>
    <nav>
      <a href="#">
        <img src="img/logo.png" alt="logo">
      </a>
      <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span><i></i></span>
          </button>

      <div>
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Products</a>
          </li>
          <li>
            <a href="#">Services</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>

<script src="https://code.   jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

:hover — CSS — Дока

Кратко

Секция статьи «Кратко»

Хорошим паттерном в сайтостроении считается реакция элементов на действия пользователя. Например, если на элемент можно нажать, то при наведении курсора его стили должны немного меняться, как бы говоря пользователю «Нажми меня!»

Раньше интерактив можно было реализовать только при помощи JS, что сильно усложняло верстальщикам жизнь. Но сегодня у нас существует отличный помощник — псевдокласс :hover.

Пример

Секция статьи «Пример»

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

.link {  color: #000;  text-decoration: none;}.link:hover {  color: pink;  text-decoration: underline;}
          .link {
  color: #000;
  text-decoration: none;
}
.link:hover {
  color: pink;
  text-decoration: underline;
}

Как пишется

Секция статьи «Как пишется»

После любого селектора ставим двоеточие и пишем ключевое слово hover.

Селектор по тегу в состоянии

:hover Секция статьи «Селектор по тегу в состоянии :hover»

a:hover {  /* Стили */}
          a:hover {
  /* Стили */
}

Селектор по классу в состоянии

:hover Секция статьи «Селектор по классу в состоянии :hover»

.link:hover {  /* Стили */}
          .link:hover {
  /* Стили */
}

Составной селектор в состоянии

:hover Секция статьи «Составной селектор в состоянии :hover»

li .link:hover {  /* Стили */}
          li .link:hover {
  /* Стили */
}

Селектор по id в состоянии

:hover Секция статьи «Селектор по id в состоянии :hover»

#id:hover {  /* Стили */}
          #id:hover {
  /* Стили */
}

Селектор по классу и его псевдоэлемент в состоянии

:hover Секция статьи «Селектор по классу и его псевдоэлемент в состоянии :hover»

. link::before:hover {  /* Стили */}
          .link::before:hover {
  /* Стили */
}

Как это понять

Секция статьи «Как это понять»

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

Подсказки

Секция статьи «Подсказки»

💡 :hover можно очень круто анимировать, добавив в блок кода свойство transition 🎉

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

💡 Если дизайнер не нарисовал в макете разные состояния, либо просите у него это сделать, либо пропишите стили на своё усмотрение. Но любой элемент, на который можно нажать, должен иметь как минимум стили для :hover.

На практике

Секция статьи «На практике»

Дмитрий Волков советует

Секция статьи «Дмитрий Волков советует»

💡 А что если на сайт зайти с планшета, к которому подключена bluetooth-мышь? Однозначно, ховер должен работать! А если дополнительных устройств ввода нет, то, конечно, стили по наведению должны быть сброшены, чтобы избежать визуального залипания при нажатии на соответствующие элементы.

Вот удобная практика для таких случаев, она ещё и позволяет писать чуточку меньше кода.

🛠 Чтобы не писать дополнительные обнуления ховер-стилей для тач-устройств, состояние :hover удобно задавать внутри медиавыражений с условием по типу взаимодействия с устройством.

Пример, исключающий тач-устройства, но не полностью:

.link {  color: #ffffff;  text-decoration-color: #2E9AFF;  transition: background-color 0.5s linear;}/* Есть возможность навести указатель на элемент */@media (any-hover: hover) {  .link:hover {    background-color: #2E9AFF;    transition: background-color 0.1s linear;  }}
          .link {
  color: #ffffff;
  text-decoration-color: #2E9AFF;
  transition: background-color 0.5s linear;
}
/* Есть возможность навести указатель на элемент */
@media (any-hover: hover) {
  .link:hover {
    background-color: #2E9AFF;
    transition: background-color 0.1s linear;
  }
}

Открыть демо в новой вкладке

🎁

Условие any-hover: hover допускает устройства с сенсорным экраном, но только если подключено дополнительное устройство ввода с нужной функциональностью для ховера (мышь, тачпад и т. п.)

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

По аналогии можно использовать и другое состояние — :active.

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 Пользователь может зайти на ваш сайт не только с десктопа, где есть мышка и её можно на что-то навести, но и с планшета или телефона, где мышкой выступает палец, а его нельзя на что-то навести, им можно только тапнуть.

Хорошая практика — сбрасывать :hover стили для тач-устройств. Иначе при нажатии на какой-то элемент ховер-стили будут залипать — телефон не знает, когда вы отводите палец в сторону.

🛠 Сайт смотрится аккуратнее и интереснее, если изменение стилей происходит с лёгкой анимацией, а не резко. Этот принцип взят из окружающего нас мира. Вспомните хоть одно событие, которое происходит резко, моментально, без промежуточных стадий. Не вспомните 😏

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

.link {  color: #ffffff;  text-decoration-color: #2E9AFF;  /* Скорость исчезновения фонового цвета */  transition: background-color 0.5s linear;}.link:hover {  background-color: #2E9AFF;  /* Скорость изменения фонового цвета на голубой */  transition: background-color 0.1s linear;}
          .link {
  color: #ffffff;
  text-decoration-color: #2E9AFF;
  /* Скорость исчезновения фонового цвета */
  transition: background-color 0.5s linear;
}
.link:hover {
  background-color: #2E9AFF;
  /* Скорость изменения фонового цвета на голубой */
  transition: background-color 0.1s linear;
}

Открыть демо в новой вкладке

Ссылка быстро (за 0.1 секунды) меняет фоновый цвет на голубой при наведении курсора и чуть медленнее (за 0.5 секунды) приходит обратно в исходное состояние, когда курсор уводится за пределы ссылки.

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :hover — :active.

Этот порядок легко запомнить в виде аббревиатуры LVHA.

Псевдоклассы | w3.org.ua

Что такое псевдоклассы?

Псевдоклассы используются для определения специальных состояний элемента. Например, можно определить:

стили для элемента, когда на него наведена мышь;
стили для гиперссылок.

Также, можно сказать, что псевдоклассы, это классы которые описаны в CSS, но не присутствуют в HTML коде, хотя и влияют на оформление элементов. Применение псевдоклассов позволяет расширить возможности оформления элементов на странице.

Пример использования

селектор:псевдокласс { свойство: значение; }

селектор:псевдокласс {

свойство: значение;

}

Обратите внимание, что селектор:псевдокласс пишутся слитно! Без пробелов!

Псевдоклассы для оформления гиперссылок

Гиперссылки могут быть оформлены различными способами, так чаще всего используются следующие псевдоклассы:

:link — псевдокласс описывающий обычное отображение гиперссылки;
:visited — посещенная гиперссылка, часто отображают серым цветом, последнее время наметилась тенденция не оформлять посещенные гиперссылки;
:hover — состояние ссылки, когда на нее наведен курсор мыши. Псевдокласс hover можно применять и на других элементах;
:active — состояние ссылки в момент клика мышью. Данный класс можно применять и на других элементах, чтобы обозначить клик мышью. Например на кнопках.

Применение псевдоклассов для оформления ссылок:

/* непосещенная ссылка*/ a:link { color: #FF0000; } /* посещенная ссылка */ a:visited { color: #00FF00; } /* наведение мыши на ссылку */ a:hover { color: #FF00FF; } /* клик по ссылки */ a:active { color: #0000FF; }

/* непосещенная ссылка*/

a:link {

color: #FF0000;

}

/* посещенная ссылка */

a:visited {

color: #00FF00;

}

/* наведение мыши на ссылку */

a:hover {

color: #FF00FF;

}

/* клик по ссылки */

a:active {

color: #0000FF;

}

Обратите внимание, что псевдокласс :hover должен следовать после описания :link и :visited, для правильного срабатывания приоритета. Также, псевдокласс :active должен располагаться ниже класса :hover.

Псевдоклассы не являются регистрозависимыми.

В HTML5 переосмыслили понятие гиперссылки, которая теперь может выступать как блочный элемент.

Псевдоклассы и классы в CSS

Выше мы описывали применение псевдоклассов к тегам HTML. Однако, можно определить псевдоклассы и CSS классам, в таком случае описание выглядит следующим образом:

a.hello:hover { color: red; }

a.hello:hover {

color: red;

}

.one:hover { background: green; }

.one:hover {

background: green;

}

Псевдокласс :first-child

Псевдокласс :first-child позволяет оформить первый элемент вложенный внутри родителя.

Например, данный код выделит синим цветом первый параграф на странице:

p:first-child { color: blue; }

p:first-child {

color: blue;

}

Чтобы выделить первые элементы span во всех параграфах необходимо использовать код:

p span:first-child { color: red; }

p span:first-child {

color: red;

}

Для выделения всех элементов span внутри первого элемента p необходимо использовать:

p:first-child span { color: blue; }

p:first-child span {

color: blue;

}

C псевдоклассами очень удобно работать в препроцессоре Sass

Еще псевдоклассы

Селектор	Пример	Описание
:active	a:active	Выбор активной ссылки
:checked	input:checked	Все выбранные (отмеченные) элементы input
:checked	input:checked	Все выбранные (отмеченные) элементы input
:empty	p:empty	Все элементы p которые не имеет дочерних элементов
:focus	input:focus	Выбрать элемент input находящийся в фокусе
:invalid	input:invalid	Выбрать все элементы input с неправильными значениями
:last-child	p:last-child	Выбрать все элементы p, которые являются последним дочерним элементом родителя
:checked	input:checked	Все выбранные (отмеченные) элементы input
:required	input:required	Выбрать все обязательные к заполнению элементы input

46 CSS Link Hover Effects

Коллекция отобранных бесплатных HTML и CSS эффектов ссылки примеров кода с :hover и :active состояние. Обновление коллекции февраля 2020 года. 13 новых предметов.

Панировочные сухари CSS
Стрелки CSS

Эффекты наведения на ссылку, которые заполняют ссылку подчеркиванием или перечеркиванием с помощью переходов CSS и свойства clip-path .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффект подчеркивания ссылки

Анимированный эффект подчеркивания/границы. Отредактируйте transform-origin , чтобы изменить начало анимации. В настоящее время он установлен налево.

Исследование стилей ссылок без классов.

Ссылка с градиентным фоном при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Анимированный вес шрифта при наведении

Тонкая ссылка выделяется жирным шрифтом.

О коде

Многоканальная ссылка

Многострочный эффект наведения на ссылку.

О коде

Ссылка Стрелка

Идея со стрелкой при наведении на ссылку.

О коде

Градиентная анимация с подчеркиванием

Используя фоновый градиент CSS и анимацию CSS, это позволяет анимации подчеркивания ссылки переноситься на несколько строк. Раньше этого можно было добиться с помощью элементов :pseudo . Однако сделать это на нескольких строках оказалось непросто.

О коде

Прохладный эффект парения с режимом смешивания и наложения

Это круто, потому что вам не нужно менять цвет ссылки на :hover . Mix-blend-mode в ::after инвертирует его для вас.

Демо GIF: Underline Hover

Underline Hover

HTML и CSS эффект подчеркивания при наведении.
Сделано Элвином ван ден Хейзелом
12 июля 2017 г.

скачать демо и код

Демонстрационное изображение: Animate Underline Wavy

Animate Underline Wavy

Это крутое волнистое подчеркивание, которое нравится людям.
Сделано Дэвидом Дарнсом
10 июля 2017 г.

скачать демо и код

Демонстрационное изображение: Необычное подчеркивание ссылки Text-Shadow

Необычное подчеркивание ссылки Text-Shadow

HTML и CSS причудливое text-shadow подчеркивание ссылки.
Сделано Райаном
1 июля 2017 г.

скачать демо и код

Демонстрационный GIF: Следуйте по ссылкам

Следуйте по ссылкам

Наведите курсор на ссылку, и она следует за курсором, выделяя ссылки по мере продвижения!
Сделано Кэтрин Като
23 июня 2017 г.

скачать демо и код

Демонстрация GIF: стили ссылок отдельных элементов на чистом CSS

стили ссылок отдельных элементов на чистом CSS

Вдохновлен тем, что видел в Medium и других перьях, но с добавленной попыткой привнести некоторую анимацию. В настоящее время ограничено ссылкой общей шириной 10000 пикселей по всем строкам.
Сделано Мэтью Шилдсом
24 июня 2017 г.

скачать демо и код

Демонстрационное изображение: Эффект перечеркнутого наведения

Эффект перечеркнутого наведения

Эффект наведения для ссылок. Используйте только один псевдоэлемент в ссылке.
Сделано Артёмом
23 июня 2017 г.

скачать демо и код

Демонстрационный GIF: переходы по ссылкам

Jumping Link Hovers

Переходы по ссылкам с HTML и CSS.
Сделано Беннетом Фили
19 июня 2017 г.

скачать демо и код

Демо GIF: Ссылка со стрелкой

Ссылка со стрелкой

Ссылка со стрелкой — кружок при наведении (см. домашний веб-сайт Google).
Сделано Александром Джолли
21 мая 2017 г.

скачать демо и код

О коде

Ключевые кадры CSS3 Стиль ссылки анимации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Анимация ссылок

Анимация ссылки при наведении.

О коде

Ссылки с примечаниями на полях

Вторая попытка создать доступную и более полнофункциональную версию стиля ссылок, используемого в https://thecorrespondent.com

Демонстрация GIF: Anchor Hover Effects

Anchor Hover Effects

Тестирование некоторых эффектов наведения для тегов привязки в типографике тела с использованием псевдоэлементов CSS.
Сделано Саймоном Гудером
29 мая 2016 г.

скачать демо и код

О коде

Подсветка ссылки Эффект наведения/щелчка

Фоновый переход CSS для добавления эффекта выделения при наведении/щелчке ссылки.

О коде

Эффекты подчеркивания текста при наведении

Быстрые эксперименты с :до и :после эффекты наведения на однострочных элементах.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Ссылка со стрелкой

Ссылка со стрелкой :hover эффект.

О коде

Анимация при наведении ссылки SCSS

Гиперссылка :hover Анимация CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

Демонстрация GIF: Anchor Click Canvas Animation

Anchor Click Canvas Animation

Холст позиционируется абсолютно и использует свойство svg css pointer-events, поэтому у вас нет холста, блокирующего ваши клики.
Сделано Ником Шеффилдом
3 мая 2016 г.

скачать демо и код

О коде

Идеи ссылок (доказательство концепции)

Классные идеи ссылок CSS3.

Демонстрационная GIF-анимация: Subtle Link Animations

Subtle Link Animations

Ничего серьезного, ничего сверхъестественного. Всего несколько тонких, но очевидных CSS-анимаций текстовых ссылок. Скорее ссылка, чем что-то новаторское.
Автор Йосип Психистал
21 октября 2014 г.

скачать демо и код

Демонстрация GIF: Эффекты при наведении ссылки

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

8 CSS эффектов при наведении ссылки.
Сделано Пейвен Лу
4 апреля 2014 г.

скачать демо и код

CSS и ссылки | схемы с несколькими ссылками, эффекты наведения

Путь // www.yourhtmlsource.com → Таблицы стилей → CSS И ССЫЛКИ

by Ross Shannon

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

Навигация по страницам:
Базовый блок ссылок CSS | Настройка нескольких схем · Наследование | Руководство по наведению | Ссылки на изображения

Эта страница последний раз обновлялась 21 августа 2012 г.

Базовый блок ссылок CSS

Существует четыре элемента таблиц стилей, которые определяют внешний вид ссылок:

a: ссылка { }
a: посещение { }
a: наведение { }
a: активное { }

Эти четыре селектора в основном охватывают старые атрибуты link, vlink и alink, но последний позволяет настроить эффекты прокрутки текста . Ваша строка a:hover вступает в игру, когда пользователь наводит указатель мыши на ссылку. Внешний вид ссылки может меняться разными способами: от простого переключения цвета до полного преобразования в другой шрифт и размер. Эти эффекты очень помогают показать читателю, на какую именно ссылку он указывает. Они тоже отлично выглядят.

Порядок, в котором вы их определяете, важен. Если вы переставите их, ваши эффекты при наведении могут перестать работать, так как они будут переопределены. Просто убедитесь, что вы заказали их, как у меня выше, и у вас не будет никаких проблем.

sourcetip: Есть небольшая умная мнемоника, которая позволяет легко запомнить правильный порядок определения этих псевдоэлементов в вашей таблице стилей; просто вспомните те знаменитые татуировки на суставах пальцев: ЛЮБОВЬ/НЕНАВИСТЬ, заглавные буквы, каждая из которых обозначает один из четырех элементов.

Теперь давайте посмотрим на некоторые из наиболее распространенных параметров форматирования, которые у вас есть:

цвет: позволяет изменить цвет текста. Используйте веб-безопасные или именованные цвета. Я считаю, что лучшие опрокидывания меняют именно это.
украшение текста: дает вам несколько вариантов форматирования ваших ссылок. Установите для этого параметра значение none, чтобы избавиться от подчеркиваний в ссылках. Если вы хотите вернуть их или поместить в качестве атрибута наведения, используйте text-decoration: underline. Чтобы получить эффект надчеркивания (строка над текстом), установите его в положение надчеркивания.
вес шрифта: позволяет изменить жирность текста. Установите полужирный или обычный. Есть и другие более конкретные значения, но они пока не поддерживаются браузерами.
стиль шрифта: — это команда для изменения текста курсивом. Установите его курсивом или обычным, чтобы переопределить.
семейство шрифтов: , как вы видели раньше, это меняет шрифт.
размер шрифта: и еще раз. Довольно просто.
цвет фона: позволяет вам придать тексту ссылки цвет фона. Особенно полезно для выделения при наведении.

Если вам нужна дополнительная информация обо всех этих свойствах, а также о некоторых дополнительных свойствах, прочтите CSS и текст.

Совместимость с браузером Примечание:

Не проблема для этого. Эффекты наведения на ссылки поддерживаются всеми браузерами, начиная с Internet Explorer 3! Вы даже можете применять эффекты наведения к элементам, которые не являются ссылками, например p:hover {background: #ffb; }. Это будет работать во всех современных браузерах, но не в Internet Explorer 6.

Настройка нескольких схем

Это включает в себя использование классов CSS и довольно просто. Вы просто выбираете имя для своего класса (например, «nav») и вставляете это имя (и точку) вместе со ссылкой, например:

. a.nav: ссылка {цвет: синий; текстовое оформление: нет; }
a.nav: посетил {цвет: фиолетовый; текстовое оформление: нет; }
a.nav: hover {цвет: оранжевый; оформление текста: подчеркивание; }
a.nav:active {цвет: красный; }

а.внешний:ссылка {цвет: #0000ff; размер шрифта: 18pt; вес шрифта: полужирный; }
a.external:visited {color: #894f7b; вес шрифта: полужирный; }
a.external: hover {украшение текста: надчеркивание; цвет фона: #003399; }
a.external:active {цвет: красный; }

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

Эта первая ссылка ведет на class ="nav">Главную страницу. Этот файл ведет на class ="external">внешний сайт.

Как вы, наверное, видите, я использую несколько коллекций ссылок в HTML Source. Они очень полезны, когда вам нужны ссылки с подходящим светлым цветом для перехода на панель навигации с темным фоном или для выполнения определенных целей (например, вторичные ссылки, которые я размещаю повсюду для получения дополнительной информации).

sourcetip: Если вы собираетесь использовать несколько class es, оставьте тип ссылок, который вы используете чаще всего, без класса. Например, ссылки в области основного содержимого страницы. Это избавит вас от необходимости добавлять class="whatever" к слишком большому количеству ссылок.

Наследование

Когда вам нужно добавить дополнительные группы ссылок помимо группы по умолчанию (группы без класса), дополнительные группы наследуют или принимают форматирование группы по умолчанию. Если вы определили свои ссылки по умолчанию как полужирные, все будущие классы ссылок будут выделены полужирным шрифтом, если вы не вернете их к нормальному состоянию с помощью font-weight: normal. То же самое относится и ко всем другим атрибутам.

Руководство по наведению

Это всего лишь несколько советов и предложений о том, как использовать способность наведение .

Не позволяйте этому влиять на окружающий текст

Если ваша ссылка при наведении начинает отталкивать другой текст и элементы страницы, вы должны убрать ее или приглушить. Чаще всего это происходит, если вы меняете начертание или размер шрифта, но вы можете получить небольшое движение от перехода к полужирному, курсивному или подчеркнутому тексту. Проверьте это, и если что-то движется, уберите эффекты.

Простые изменения лучше всего

Попробуйте изменить только одну или две вещи при наведении. Измените цвет, возможно, добавьте подчеркивание, но это все. Это не должно быть важным событием, когда пользователь наводит курсор на ссылку, просто небольшой эффект, который поможет им и придаст стиль вашей странице.

Выбор цвета

Среди основных корпоративных веб-сайтов красный цвет кажется популярным выбором для изменения при наведении по некоторым причинам. Лично мне это совсем не нравится. Предположительно, это цвет, который легче всего распознать и сделать ваши ссылки более удобными для использования, но вместо этого вы должны использовать цвет, который дополняет ваш сайт. Однако красный — хороший цвет для a:active.

По умолчанию любое изображение, содержащееся в ссылке, будет иметь большую синюю рамку, чтобы обозначить, что оно является частью ссылки. Как правило, это выглядит неряшливо, поэтому мы использовали атрибут border , чтобы скрыть его, например,

. border="0" />

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

a img {граница: нет; }

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

Отображать скрытый элемент при наведении курсора на гиперссылку или тег.

Мы можем сделать скрытые элементы HTML видимыми при наведении с помощью CSS. С помощью этого урока вы научитесь отображать скрытые элементы. Мы можем применить CSS для отображения любого HTML-элемента при наведении курсора на тег с помощью соседнего родственного селектора. Селектор соседних элементов используется для выбора элемента, который находится рядом или рядом с указанным тегом селектора. Этот комбинатор выбирает только один тег, который находится рядом с указанным тегом.

Давайте посмотрим на пример и обсудим каждую часть кода.

Вы можете поместить тег в раздел для выравнивания содержимого по центру (тег не поддерживается в HTML5). Вместо этого вы также можете использовать свойство CSS text-align со значением «center».
Поместите тег
и напишите в нем содержимое.
Поместите теги или , чтобы выделить указанную часть текста жирным шрифтом, чтобы сделать его более очевидным для пользователя.
Поместите тег
, определяющий разрыв строки.
Поместите тег , который используется для вставки гиперссылок на другие страницы или файлы, местоположения на той же странице, адреса электронной почты или любой другой URL-адрес.
Создайте тег
и напишите в нем содержимое.

 

  <голова>
    Название документа
  
  <тело>
    <центр>
       W3docs 
      
        Наведите курсор на элемент, показанный ниже, чтобы увидеть элемент div.
      
      

      

      W3docs
      <дел>
        Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.

Попробуй сам »
Выберите цвет для тега
с помощью свойства color.

Используйте свойство display для
и установите значение «none». Это означает, что элемент вообще не будет отображаться.
Используйте свойство border для добавления границы к вашему
и установите значения свойств border-width, border-style и border-color.
Используйте свойство курсора со значением «указатель» для тега , что означает, что курсор указывает ссылку как указатель.
Используйте соседний селектор того же уровня. В нашем примере выбираются все элементы
, расположенные сразу после элементов .
Используйте свойство display и установите значение «block».
Установите цвет текста с помощью свойства color. Вы можете выбрать любой цвет из палитры цветов.
Установите размер шрифта
.
h3 { цвет: #4287f5; } дел { дисплей: нет; граница: 5px двойной #b4b8bf; } а { курсор: указатель; } а: наведите + div { дисплей: блок; цвет: #4287f5; размер шрифта: 20px; }
Вот результат нашего кода.
Пример отображения скрытого элемента при наведении с тегом
:
<голова> Название документа <стиль> h3 { цвет: #4287f5; } дел { дисплей: нет; граница: 5px двойной #b4b8bf; } а { курсор: указатель; } а: наведение + div { дисплей: блок; цвет: #4287f5; размер шрифта: 20px; } <тело> <центр>
W3docs
Наведите курсор на элемент, показанный ниже, чтобы увидеть элемент div.

W3docs <дел> Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии.