Css подчеркивание при наведении – css — CSS скольжения подчеркивание при наведении курсора мыши — цветового перехода не работает на гостевую ссылку

Плавное подчёркивание ссылки при наведении

Плавное подчёркивание ссылки при наведении

Сегодня мы анонсируем новую серию статей, в которой мы покажем вам, как можно быстро и без особых усилий «прокачать» ваш сайт. Мы будем выкладывать маленькие кусочки кода(сниппеты), которые будут работать сразу после того, как вы вставите их в ваш файл стилей.

В этой статье мы расскажем вам как добиться такого эффекта, как плавное подчеркивание ссылки при наведении css средствами. Выглядеть это будет так:
a {
	position: relative;
	color: #00a650; /*задаём цвет ссылки*/
	cursor: pointer;
	line-height: 1; /*задаём высоту строки*/
	text-decoration: none; /*убираем подчёркивание*/

}
a:after {
	display: block;
	position: absolute;
	left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
	width: 0;/*задаём длинну линии до наведения курсора*/
	height: 2px; /*задаём ширину линии*/
	background-color: #00a650; /*задаём цвет линии*/
	content: "";
	transition: width 0.3s ease-out; /*задаём время анимации*/
}

a:hover:after,
a:focus:after {
	width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}


 

Плавное подчёркивание ссылки справа налево при наведении

достаточно изменить left:0 на right:0;

Применяем плавное подчеркивание ссылок при наведении к нашему стандартному шаблону.

плавное подчёркивание ссылки при наведении пример

Делаем это из административной панели:
 

плавное подчёркивание ссылок при наведении в шаблоне могута

 

  1. Открываем настройки
  2. Выбираем шаблон
  3. Открываем Style.css
  4. В самый конец кода добавляем 
.bottom-bar .main-menu .mg-menu li .submenu li a {
	position: relative;
	color: #00a650; /*задаём цвет ссылки*/
	cursor: pointer;
	line-height: 1; /*задаём высоту строки*/
	text-decoration: none; /*убираем подчёркивание*/

}
.bottom-bar .main-menu .mg-menu li .submenu li a:after {
	display: block;
	position: absolute;
	left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
	width: 0;/*задаём длинну линии до наведения курсора*/
	height: 2px; /*задаём ширину линии*/
	background-color: #00a650; /*задаём цвет линии*/
	content: "";
	transition: width 0.3s ease-out; /*задаём время анимации*/
}

.bottom-bar .main-menu .mg-menu li .submenu li a:focus:after,
.bottom-bar .main-menu .mg-menu li .submenu li a:hover:after{
	width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}
Вот вы и узнали как добится плавного подчеркивания ссылки при наведении на ссылку. Если у вас появятся какие-либо вопросы - пишите в комментариях.

Плавное подчеркивание ссылки при наведении

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

На своем сайте я применил эффект для всех ссылок. Вы можете посмотреть как он работает подведя курсор мышки к любой ссылке.  Результат достигается добавлением короткого css кода в файл style.css вашего блога.

Как создать код для эффекта плавного подчеркивания ссылки при наведении.

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

a { text-decoration:none; display: inline-block; line-height: 1; color:#2F73B6; } a:after { display: block; content: ""; height: 3px; width: 0%; background-color: #225384; transition: width 0.4s ease-in-out; /*время появления линии в секундах*/ } a:hover:after, a:focus:after { width: 100%; } a:hover{ color:#225384; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

a {

text-decoration:none;

display: inline-block;

line-height: 1;

color:#2F73B6;

}

 

a:after {

    display: block;

    content: "";

    height: 3px;

    width: 0%;

    background-color: #225384;

    transition: width 0.4s ease-in-out; /*время появления линии в секундах*/

}

 

a:hover:after,

a:focus:after {

    width: 100%;

}

 

a:hover{

  color:#225384;

}

Теперь давайте рассмотрим, что здесь и зачем подробней:

Как вы знаете ссылка создается в виде блока с классом «link», внутри которого помещена собственно ссылка.

<div> <a href="#">Ваша ссылка 1</a> <a href="#">Ваша ссылка 2</a> </div>

<div>

<a href="#">Ваша ссылка 1</a>

<a href="#">Ваша ссылка 2</a>

</div>

Xтобы создать эффект плавного подчеркивания при наведении необходимо задать для них свойства css. Вам необходимо внимательно прочитать комментарии к коду, и задать свойства подходящие для внешнего вида вашего сайта.

.link a { text-decoration:none; /*Удаляем подчёркивание ссылки если оно предусмотрено темой вашего блога*/ display: inline-block; /*Делаем блочный элемент для ссылки*/ line-height: 1; /*Значение для высоты строки (можно указать в пикселях)*/ color:#2F73B6;/*Цвет ссылки*/ }

.link a {

text-decoration:none; /*Удаляем подчёркивание ссылки если оно предусмотрено темой вашего блога*/

display: inline-block; /*Делаем блочный элемент для ссылки*/

line-height: 1; /*Значение для высоты строки (можно указать в пикселях)*/

 

color:#2F73B6;/*Цвет ссылки*/

}

Далее, мы делаем плавное появление линии подчеркивания под ссылкой, добавлением элемента «after»:

.link a:after { display: block; /*создаем блок для элемента*/ content: ""; /*блок без текста поэтому кавычки оставляем пустыми*/ height: 3px; /*высота линии*/ width: 0%; /*ширина линии*/ background-color: #225384; /*цвет фона линии*/ transition: width 0.4s ease-in-out; /*время появления линии в секундах*/}

.link a:after {

    display: block; /*создаем блок для элемента*/

    content: ""; /*блок без текста поэтому кавычки оставляем пустыми*/

    height: 3px; /*высота линии*/

    width: 0%; /*ширина линии*/

    background-color: #225384; /*цвет фона линии*/

   transition: width 0.4s ease-in-out; /*время появления линии в секундах*/}

Затем прописываем псевдоэлементы «:hover»:  и «:focus»: для задания 100% ширины элемента «after» Это позволяет плавно изменять ширину линии подчеркивания от 0% до полной ширины ссылки.

.link a:hover:after, .link a:focus:after { width: 100%; }

.link a:hover:after,

.link a:focus:after {

    width: 100%;

}

Если необходимо, чтобы при наведении ссылка меняла цвет, можно дописать следующий код:

.link a:hover /*Чтобы эффект смены цвета применялся ко всем ссылкам, вместо «link a» , пишите просто «a» */ { color:#225384; }

.link a:hover   /*Чтобы эффект смены цвета применялся ко всем ссылкам, вместо «link a» , пишите просто «a»  */

{

    color:#225384;

}

Как вставить код на сайт.

Перед тем как вносить изменения в код, обязательно сделайте резервную копию сайта.

Данный код вставляется в самый конец  файла  style.css вашего сайта. Для этого заходите в панель управления сайтом «Внешний вид» (1) =>«Редактор» (2) =>«style.css» (3)

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

 

Не забудьте нажать кнопку «Обновить файл» (4) .

Эффект плавного подчеркивания ссылки при наведении полностью готов для вашего ресурса. На этом пожалуй все, применяйте данную функцию для улучшения внешнего вида и поведенческих факторов вашего сайта. До встречи!

Перейти на главную

Как можно сделать такое подчеркивание при hover? — Хабр Q&A

Сделал меню но что то идет не так пытаюсь добавить подчеркивание при ховере но оно добавляется но оно же и добавляется в подменю, подскажите что не так делаю или как вообще правильнее сделать?
Пробовал через бордер добавить но полоска идет не чисто под надписью а под весь блок.
вот такая полосчка должна быть при ховер.
<div>
				<div>
					<ul>
						<li><a href="#">ГЛАВНАЯ</a></li>
						<li><a href="#">УСЛУГИ</a>
								<ul>
									<li><a href="#">ТРЕНАЖЕРНЫЙ ЗАЛ</a></li>
									<li><a href="#">СТУДИЯ ЙОГИ</a></li>
									<li><a href="#">БАССЕЙН</a></li>
									<li><a href="#">САУНА</a></li>
									<li><a href="#">БОКС</a></li>
									<li><a href="#">КОНСУЛЬТАЦИЯ
										<br> ДИЕТОЛОГА</a></li>
									<li><a href="#">АЭРОБИКА</a></li>
								</ul>
						</li>
						<li><a href="#">КАТАЛОГ</a></li>
						<li><a href="#">О КОМПАНИИ</a></li>
						<li><a href="#">НОВОСТИ</a></li>
						<li><a href="#">КОНТАКТЫ</a></li>
					</ul>
				</div>
			</div>
#nav ul ul { display: none; border-top: 2px solid #344e98; } #nav ul li:hover > ul{ transition: 0.5s; display: block; } #nav ul{ background: #fff; color: #2b2b2b; font-size: 16px; list-style: none; position: relative; display: inline-block; } #nav ul:hover{ /*border-bottom: 2px solid #344e98;*/ } #nav ul li { float: left; } #nav ul li:hover{ /*border-bottom: 2px solid #344e98;*/ } #nav ul li:hover a{ } #nav ul li a{ display: block; text-decoration: none; padding: 10px 20px; color: #2b2b2b; } #nav ul li a:hover{ /*border-bottom: 2px solid #344e98;*/ } #nav ul ul{ background: #373737; padding: 0; position: absolute; top: 100%; } #nav ul ul li{ transition: 0.5s; float: none; position: relative; min-width: 190px; width: 190px; font-size: 14px; } #nav ul ul li a{ color: #f5f5f5; } #nav ul ul li a:hover { transition: 0.1s; color: #646464; font-size: 12px; }

и да еще момент,плавное выпадающее меню на css можно как нибудь сделать на дисплей:блок? или как как обойти этот момент?

Плавное подчёркивание ссылки при наведении

Все темы имеют скучную анимацию при наведении на ссылки, это просто подчеркивание, давайте ка это чуток разукрасим и разнообразием эффек, а сделаем это плавным появление подчёркиванием ссылки

Для этого нам в стилях шаблона- style.css нужно найти a
и дописать следующей код

a { line-height: 1; display: inline-block; color:#0085ba; text-decoration:none; cursor: pointer; } a:after { display: block; content: &quot;&quot;; height: 2px; width: 0%; background-color: #0085ba; transition: width .3s ease-in-out; } a:hover:after, a:focus:after { width: 100%; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

a {

    line-height: 1;

    display: inline-block;

    color:#0085ba;

    text-decoration:none;

    cursor: pointer;

}

a:after {

    display: block;

    content: &quot;&quot;;

    height: 2px;

    width: 0%;

    background-color: #0085ba;

    transition: width .3s ease-in-out;

}

a:hover:after,

a:focus:after {

    width: 100%;

}

Немного поясню код
text-decoration:none; — мы избавляемся от стандартного подчеркивание ссылки
Псевдоэлемент :after, добавляет дополнительный элемент, в нашем случае это линия, и определим простенький эффект перехода в свойстве transition:. Ширину линии изначально выставим с нулевым значением width: 0%;, высоту определим в 2px. Цвет линии может быть любым, в примере не стал особо фантазировать и выставил в соответствии цвета текста ссылки.
transition:. время\скорость анимации
Псевдоклассы:hover и :focus. Первый будет определяет стиль ссылки при наведении, второй сработает когда на ссылке курсор. Здесь мы изменим значение ширины в 100%.
Выглядит это будет так

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

Эффект плавного подчеркивания ссылки с помощью CSS3

Всем привет!
Позвольте вам продемонстрировать эффект для ссылок. При наведении на ссылку курсора, ссылка плавно подчеркнется слева направо или наоборот справа налево.
Эффект красивый и простой, так как используется CSS3.
Буду осуществлять эффект с помощью псевдоэлемента «:after»  и свойства «transition».
Предлагаю посмотреть демонстрацию эффекта:

[смотреть демонстрацию]

Как вам эффектик для ссылок?

=> эффект плавного подчеркивания ссылки слева направо

В HTML:

<a href="#">Наведи курсор!</a>

CSS:


.underline {
position: relative;
color: #ff3296;
cursor: pointer;
font-size: 24px;
}
.underline:after {
display: block;
position: absolute;
left: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #980044;
content: "";
transition: width 0.2s;
}
.underline:hover {
color: #980041;
}
.underline:hover:after {
width: 100%;
}

=> эффект плавного подчеркивания ссылки справа налево

Достаточно заменить строку №10 «left: 0;» на «right: 0;»

CSS:


.underline {
position: relative;
color: #ff3296;
cursor: pointer;
font-size: 24px;
}
.underline:after {
display: block;
position: absolute;
right: 0;
bottom: -10px;
width: 0;
height: 10px;
background-color: #980044;
content: "";
transition: width 0.2s;
}
.underline:hover {
color: #980041;
}
.underline:hover:after {
width: 100%;
}

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓


Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: css, эффекты для сайта

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

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

 

 


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

 

h3 > a {
  position: relative;
  color: #000;
  text-decoration: none;
}
h3 > a:hover {
  color: #000;
}

После этого добавим границу и спрячем ее с помощью трансформации. Это делается с помощью установки этих свойств псевдоэлементу :before и задания значения масштаба по оси X 0. В качестве обходного пути спрячем эти свойства с помощью visibility: hidden для браузеров, не поддерживающих анимации CSS:

 

h3 > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

В самом конце укажем элементу анимировать все применяемые к нему изменения со значением продолжительности 0,3 секунды. Теперь, чтобы анимация появилась, нужно просто сделать элемент снова видимым при наведении указателя мыши и задать значение масштаба по оси X 1:

 

h3 > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

И это все! На всякий случай в демонстрации работы оставлены приставки производителей для старых версий браузеров Firefox и Opera, но если Вам не требуется поддержка старых версий, можете использовать только свойства без приставок производителя и с приставкой производителя -webkit, как в коде CSS в тексте урока.

Автор урока Tobias Ahlin

Перевод — Дежурка

Смотрите также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *