Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

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

Содержание

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

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

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

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

}
a:after {
	display: block;
	position: absolute;
	left: 0; 
	width: 0;
	height: 2px; 
	background-color: #00a650; 
	content: "";
	transition: width 0.3s ease-out; 
}

a:hover:after,
a:focus:after {
	width: 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; 
	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%; 
}
Вот вы и узнали как добится плавного подчеркивания ссылки при наведении на ссылку. Если у вас появятся какие-либо вопросы — пишите в комментариях.

Создайте свои интернет-магазин в два клика!

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
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. Изменение цвета фона ссылки

Подчеркивание при наведении курсора делается дополнительное подчеркивание



Вот код у меня есть проблема с моим подчеркнуть эффект при наведении его exppanding дополнительную как это исправить, пожалуйста, помогите мне ************************ HTML

<div>
<ul>
<li><a href="#">Home</a></li>
<li><a>Models</a>
<ul>
<li><a href="#"></a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">Bmw</a></li>
<li><a href="#">Mercedes</a></li>
</ul>
</li>
<li><a href="#">Offers</a></li>
<li><a href="#">Group Sales</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>

А еще я хочу, чтобы мой выпадающий список был посередине его родителя и здесь its********* CSS

 .nav-wrap {
 background: white;
 width: 100%;
 }

#example-one {
text-align: right;
}

#example-one li {
text-align: left;
position: relative;
display: inline-block;
font-family: 'Montserrat', sans-serif;
top:-20px;
}

#example-one a {
color: #000;
font-weight: bold;
font-size: 14px;
padding: 15px 15px;
text-decoration: none;
position: relative;
color: #000;
}
#example-one a:after {
color: #333;
content: '';
position: absolute;
width: 0;
height: 3px;
display: block;
margin-top: 2px;
right: 0;
background: #000;

transition: width all 1s ease;
-webkit-transition: width 1s ease;
}

#example-one a:hover:after {
width: 100%;
left: 0;
background: #000;
}

.dropdown-content {
display: none;
position: absolute;
top: 30px;
left: 0;
background-color:white;
z-index: 1;
}

.dropdown-content a {
color: black;
text-decoration: none;
display: block;
}

#example-one li li {
display: block;
}

#example-one li:hover>ul {
display: block;
}
html css
Поделиться Источник Muhammad Salman Mehmood     15 апреля 2017 в 20:16

2 ответа

  • Удалить подчеркивание при наведении курсора в firefox

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

  • Как сделать пунктирное подчеркивание ссылки при наведении курсора?

    У меня есть ссылка <a class=link-articles href=#articles>My Articles</a> и мой css .link-articles { text-decoration: underline; color: blue; } Однако при наведении курсора Я хотел бы иметь вместо синего подчеркивания красное подчеркивание, но текст должен оставаться синим, и только…


0

пусть подчеркивание будет прикреплено к тексту, а не ко всему элементу списка, поэтому оно занимает ширину только текста, теперь оно занимает ширину всей ячейки в списке

Поделиться Unknown     15 апреля 2017 в 21:40


0

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

Чтобы решить эту проблему, добавьте некоторое нормализованное дополнение к вашему классу

.dropdown-content :

.dropdown-content {
    padding: 0 20px;
}

Поделиться AdamMcquiff     15 апреля 2017 в 20:39

Похожие вопросы:


Как удалить подчеркивание из ссылки и добавить подчеркивание при наведении курсора? (изображения прилагаются)

Я хочу, чтобы подчеркивание было удалено из ссылки. Кроме того, я хочу, чтобы подчеркивание появлялось при наведении на него указателя мыши. Как это можно сделать? Пожалуйста, помогите. Не парят:…


CSS: почему у меня есть красное подчеркивание на ссылках изображений при наведении курсора?

На моем веб-сайте у меня есть следующее CSS: a:hover{color:red;border-bottom:1px solid} Это показывает красное подчеркивание на текстовых ссылках при наведении курсора, что желательно. Однако это…


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

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


Удалить подчеркивание при наведении курсора в firefox

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


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

У меня есть ссылка <a class=link-articles href=#articles>My Articles</a> и мой css .link-articles { text-decoration: underline; color: blue; } Однако при наведении курсора Я хотел бы…


Как удалить подчеркивание при наведении курсора?

Я не могу удалить подчеркивание при наведении курсора на этой странице: http:/ / www.studyroomguides.net/?page_id=19 Я пробовал добавлять: .a:hover{ text-decoration: none; } Я бы хотел, чтобы…


Сделать подчеркивание стрелять по ссылке при наведении курсора

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


Убрать подчеркивание ссылки при наведении

Я пытаюсь удалить подчеркивание при наведении курсора и все такое, но это, похоже, не работает. <a href=agent_user_add.php><font face=verdana class=pluslink…


CSS переход подчеркивание показать

Я пытаюсь сделать переход CSS, в котором подчеркивание появляется снизу вверх, когда вы наводите курсор на элемент href. Я нашел этот пример,который создает подчеркивание, появляющееся слева направо…


Как удалить ненужное дополнительное подчеркивание при наведении курсора из активных навигационных ссылок?

У меня есть некоторые CSS, определяющие анимированный стиль подчеркивания при наведении курсора для моих навигационных ссылок. В настоящее время это относится к неактивным ссылкам при наведении…

Плавное подчеркивание ссылки при наведении на чистом CSS — WEB Головоломки

В это статья я расскажу, как можно сделать плавное подчеркивание ссылки на ховере. Все будет реализовано на css, без использования сторонних библиотек.

Предположим, у вас есть ссылка:

<a href="#">Как сделать плавное подчеркивание</a>

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

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

Добавим вот такие стили:

a {
	position: relative;
	color: #484848;
	font-size: 1.25rem;
	text-decoration: none;
}
a::before {
	content: '';
	position: absolute;
	left: 0; bottom: -5px;
	width: 100%;
	height: 1.5px;
	background-color: red;
}

У вас должна была появиться красная линия под ссылкой. Это и есть наш псевдоэлемент before.

Изменим ширину этой линии. Вместо 100% зададим 0 — то есть, ее теперь не будет видно.

А затем, когда пользователь будет наводить курсор на ссылку, мы будем менять свойство width у нашего псевдоэлемента. Давайте, пропишем это:

a:hover:before {
	width: 100%;
}

Итак, при наведении на ссылку появляется наша линия. Давайте зададим плавность — укажем какое свойство мы будем менять и пропишем время перехода.

a::before {
	transition: width 0.35s;
}

Здесь мы указали, что переход состояния width с нуля до 100% будет длиться 0.35 секунд.

Итак, итоговый код выглядит следующим образом:

See the Pen Как сделать плавное подчеркивание для ссылки by Pelegrin (@pelegrin2puk) on CodePen.

Я показал принцип, по которому можно создавать плавное подчеркивание. Вы можете экспериментировать и менять значения. Или менять свойства. Например, вместо того, чтобы менять width с нуля до 100% поставьте значение width: 100%, но задайте, например, transform: scaleX(0), а при наведении меняйте его на scaleX(1). Пробуйте!

У нас на канале есть видео на эту тему, советуем посмотреть, если остались вопросы.

Подчеркивание элементов на CSS — Полезное

Давно хотелось поделиться своим опытом в вёрстке с другими специалистами и сегодня решили опубликовать свой первый пост о небольшой «фишке»: подчеркивание элементов на CSS. Многие из нас видели такой эффект, как появление полосы под каким-либо элементом. Причем полоса плавно появляется либо от края, либо от центра и подчеркивает весь элемент.

Хотим заметить, что это не значение border в CSS, а несколько другое значение, при использовании которого не потребуется использование скриптов или flash. Итак, давайте начнем.

Варианты подчёркивания

На самом деле, вариантов может быть множество – всё зависит от вашей фантазии. Мы вам покажем три разных варианта: появление полосы слева, от центра и справа.

Пример 1: подчёркивание слева

HTML

Для начала давайте создадим элемент. Например, тег a, который является ссылкой.

<a href="#">текст ссылки</a>
CSS

Обычно подчеркивание определяется значением text-decoration, но анимация в этом случае не будет работать. В данном случае мы его опустим и присвоим псевдоэлемент :before, с помощью которого мы и сделаем анимированное появление подчёркивания.

a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

Данному элементу мы задали блочное обтекание, что не позволит подчёркиванию выйти за пределы границ элемента и позволит разместить тег в любом месте внутри какого-либо блока. Далее перейдём к псевдоэлементу :before.

a:before {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out;
    left: 0;
    bottom: 0;
}

Мы задали абсолютное позиционирование псевдоэлементу для того, чтобы подчёркивание было внутри тега и не выходило за его пределы. Высота полосы будет составлять 2 пиксела, длина будет равна 0, цвет красный, а значение transition отвечает за анимацию. Теперь остается добавить эффект при наведении.

a:hover:before {
    width: 40%;
}

Таким образом мы задали значение длины в 40% от всей длины элемента. По аналогии расскажу и про другие примеры, где мы будем использовать еще один псевдоэлемент.

Пример 2: подчёркивание от центра

HTML

Оставим тот же тег.

<a href="#">текст ссылки</a>
CSS
a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
a:before {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
    left: 50%;
    bottom: 0;
}
a:after {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background-color: #ec4444;
    transition: width 0.3s ease-in-out;
    left: 50%;
    bottom: 0;
}

Здесь мы добавили псевдоэлемент :after, указали позиционирование слева 50% и добавили анимацию для того, чтобы появление было плавным. Данное значение размещает полосы строго по середине.

a:hover:before {
    width: 50%;
    left: 0;
}
a:hover:after {
    width: 50%;
}

При наведении нам нужно, чтобы подчеркивание шло от центра к краям элемента. Таким образом, пвседоэлементу :before мы задали позиционирование слева равным 0, что сделает появление подчёркивания к левому краю.

Пример 3: подчёркивание справа

HTML
<a href="#">текст ссылки</a>
CSS
a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
a:after {
    display: block;
    position: absolute;
    content: "";
    height: 2px;
    width: 0;
    background: #ec4444;
    transition: width 0.3s ease-in-out;
    right: 0;
    bottom: 0;
}
a:hover:after {
    width: 40%;
}

Таким образом, мы получили появление подчёркивания справа.

css — Подчеркните подчеркивание меню Elementor при наведении / выборе

Я хотел бы сократить «подчеркивание» в заголовочном меню Elementor моего веб-сайта WordPress: Сокращение подчеркивание заголовка — скриншот

Я использовал этот код для достижения этого (я скопировал его откуда-то еще):

.

elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after
{ 
    width: 70%; 
    right: 0; 
    margin: 0 auto; 
}

Вопрос 1 . Есть ли более аккуратный / лучший способ добиться того, чего я хочу?

Вопрос 2 . Если я полностью удаляю « .elementor-widget-nav-menu .elementor-nav-menu — main: not (.e — frame-pointer) .elementor-item: before «, мое подчеркивание по-прежнему швы на работу. Зачем мне тогда это нужно в моем коде?

Как всегда, спасибо. Мишель

0

Michelle 28 Окт 2019 в 21:30

2 ответа

Лучший ответ

Ответ 1: Нет другого способа сделать это сейчас.

Ответ 2. Только этот css должен работать нормально, если вы поместите его в виджет меню Nav> Advanced> Custom css tab или в настройщик wp, если вы хотите применить его к любому другому меню навигации по всему сайту.

.e--pointer-underline .elementor-item:after {
width: 50%;
margin: 0 auto;
right: 0;
}

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

0

Soykot 31 Окт 2019 в 11:48

Этот код работает правильно. Хороший Сойкот

.e--pointer-underline .elementor-item:after {
width: 50%;
margin: 0 auto;
right: 0;
}

0

bimlesh verma 22 Апр 2020 в 08:24

Ссылки в CSS при наведении — Выделение и подчеркивание ссылок

Основой интернета является гипертекст. Гипертекст состоит из узлов перехода от одного текста к какому-либо другому и эти узлы именуются ссылками.

По общепринятым стандартам гипертекста и интернета, все ссылки на сайте должны быть подчёркнуты. Выделяются ссылки для того, чтобы пользователь мог их сразу обнаружить среди простого текста. Ссылка — это как якорь среди сплошного текста. Как спасательный круг для пользователя, взявшись за который, он сможет попасть на какой-то определенный сайт.

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

Подчеркнутые ссылки — это один из общепринятых стандартов всемирной паутины.
К сожалению, некоторые вебмастеры ищут сомнительную, на мой взгляд, оригинальность, уходят от негласных правил и не подчеркивают ссылки в силу каких-либо обстоятельств. Чаще всего такие обстоятельства выливаются в обыденную фразу: «Подчеркнутые ссылки портят дизайн».

Также существует еще одно утверждение, о котором говорит даже А. Лебедев/>: «Активные ссылки должны быть синего цвета». Однако в настоящее время синий цвет #0000FF в ссылках используется все более редко, так как web-дизайнеры предпочитают сделать ее более подходящей к основному тону сайта.

Изменение ссылки при наведении делает навигацию по сайту более удобной и понятной для пользователя. Некоторые web-мастера предпочитают не выделять ссылку в тексте, делая ее не отличимой от основного контента. К примеру, мы видим статью на каком-либо сайте. В статье есть несколько ссылок с нужными автору анкорами. Ссылки никак не выделены (не подчеркнуты, написаны черным цветом, как и вся статья), соответственно, пользователь банально не подозревает об их существовании. Особенно часто это используется при размещении в статьях оплаченных ссылок на чужой сайт, чтобы посетитель не увидел их и не захотел перейти на другой ресурс.

Несколько лет назад наиболее распространенной была следующая ситуация. Все ссылки в статье подчеркнуты и отображаются синим цветом. При наведении курсора на ссылку она меняет цвет на оттенок, близкий к синему. При переходе по ссылке она окрашивается в другой цвет (скажем, красный) и даже если пользователь выходил с сайта, а затем заходил снова, посещенные ссылки выделялись, тем самым давая понять пользователю, что он уже просмотрел данные документы. Если он очистит cookies, то все ссылки вновь окажутся «непосещенными», то есть синими.

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

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

a:link { /*Используется для непосещенных ссылок*/
}
a:visited { /*Используется для посещенных ссылок*/
}
a:hover { /*Этот псевдокласс используется для ссылок, над которыми находится курсор мыши*/
}
a:active { /*Используется для активных ссылок*/
}

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

color: 
/*Цвет ссылки. Например, color: #b32020; Цвета подбирайте в фотошопе*/
background-color:
/*Цвет фона ссылки*/
font-style:
/*Начертание шрифта: обычное (normal), наклонное (oblique) или курсивное (italic) */
letter-spacing:
/*Расстояние между буквами, задается в пикселях. Например, letter-spacing: 10px */
font-weight:
/*Насыщенность шрифта. bold — полужирное, bolder — жирное, lighter — светлое, normal — нормальное начертание. Либо можно использовать цифры от 100 до 900*/
text-decoration:
/*Оформление текста. Имеет несколько параметров: мигает раз в секунду (blink), перечеркнутый текст (line-through), надчеркнутый текст (overline), перечеркнутый текст (underline), без всех эффектов (none)*/

Если вы всё же решили убрать подчеркивание у ссылок на сайте, то в параметрах у вышеназванных псевдоклассах пропишите text-decoration: none.

html — установить подчеркивание текста-украшения при наведении

html — установить подчеркивание текста-украшения при наведении — qaru

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

Спросил

Просмотрено 2k раз

У меня html

Я хочу, чтобы href подчеркивался при наведении курсора.

Я использовал этот CSS, но все еще не происходит.

  .col .about ul li a: hover
{
   оформление текста: подчеркивание;
}

задан 2 мая ’15 в 12:10

Сасват

10.7k1616 золотых знаков5959 серебряных знаков126126 бронзовых знаков

1

.Элемент col не имеет потомков от до , поэтому селектор просто не работает! Вы должны удалить деталь ~ .

Оставить комментарий

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

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