Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2017, 11:07
Интересующийся
Отправить личное сообщение для Nik123 Посмотреть профиль Найти все сообщения от Nik123
 
Регистрация: 14.08.2017
Сообщений: 10

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

Подскажите, можно ли добиться эффекта плавного подчеркивания ссылок при наведении мыши на чистом JavaScript?
Ответить с цитированием
  #2 (permalink)  
Старый 24.08.2017, 11:42
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 11,535

Сообщение от Nik123
можно ли добиться эффекта плавного подчеркивания ссылок при наведении мыши на чистом JavaScript?
Скажу больше! Даже на чистом ЦСС.

<style type='text/css'>
a {
    line-height: 1;
    display: inline-block;
    text-decoration:none;
    cursor: pointer;
}
a:after {
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    background-color: #000000;
    transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
    width: 100%;
}
</style>
<a href='#'>Test text</a>

Взято тут
http://dbmast.ru/plavnoe-podchyorkiv...-pri-navedenii
Ответить с цитированием
  #3 (permalink)  
Старый 24.08.2017, 12:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 21,428

Nik123,
https://javascript.ru/forum/jquery/4...tml#post294215
Ответить с цитированием
  #4 (permalink)  
Старый 24.08.2017, 12:15
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 1,084

<style type='text/css'>
a {
    line-height: 1;
    display: inline-block;
    text-decoration:none;
    cursor: pointer;
}
a:after {
    display: block;
    position: relative;
    content: "";
    height: 2px;
    width: 0%;
    background-color: #000000;
    transition: all .3s ease-in-out;
    left: 50%;
}
a:hover:after,
a:focus:after {
    width: 100%;
    left: 0;

}
</style>

<a href='#'>Test text</a>


Чуть переделал пример КСА
Ответить с цитированием
  #5 (permalink)  
Старый 24.08.2017, 18:19
Интересующийся
Отправить личное сообщение для Nik123 Посмотреть профиль Найти все сообщения от Nik123
 
Регистрация: 14.08.2017
Сообщений: 10

Всё это замечательно на CSS. Но мне нужен пользовательский скрипт для браузера FF который бы плавно подчёркивал ссылки на любой странице.
Ответить с цитированием
  #6 (permalink)  
Старый 24.08.2017, 20:46
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 1,084

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#">ссылка</a>
	<script>
if(!document.querySelector('style')) document.head.insertAdjacentHTML('beforeend', '<style></style>');
document.querySelector('style').innerHTML +='a {line-height: 1;display: inline-block;text-decoration:none;cursor: pointer;}a:after {display: block;content: "";height: 2px;width: 0%;background-color: #000000; transition: width .3s ease-in-out;}a:hover:after,a:focus:after {width: 100%;}';
	</script>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 25.08.2017, 08:43
Интересующийся
Отправить личное сообщение для Nik123 Посмотреть профиль Найти все сообщения от Nik123
 
Регистрация: 14.08.2017
Сообщений: 10

Спасибо
Ответить с цитированием
  #8 (permalink)  
Старый 13.09.2017, 12:50
Интересующийся
Отправить личное сообщение для Nik123 Посмотреть профиль Найти все сообщения от Nik123
 
Регистрация: 14.08.2017
Сообщений: 10

Вопрос: почему стиль созданный с помощью размещенного выше скрипта срабатывает не для всех ссылок на странице?

P.S. Так как тема помечена закрытой скорее всего никто из компьютерных гуру мне не ответит. Эх...

Последний раз редактировалось Nik123, 13.09.2017 в 12:52.
Ответить с цитированием
  #9 (permalink)  
Старый 13.09.2017, 12:58
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 1,084

Смотри в панель разработчика, может какие-то свойства перезаписываются другими.
Ответить с цитированием
  #10 (permalink)  
Старый 14.09.2017, 08:11
Интересующийся
Отправить личное сообщение для Nik123 Посмотреть профиль Найти все сообщения от Nik123
 
Регистрация: 14.08.2017
Сообщений: 10

Deleted.

Последний раз редактировалось Nik123, 17.09.2017 в 15:06.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрытие блока ссылок с помощью OnClick N1rvana Общие вопросы Javascript 0 02.04.2017 18:03
Масовое отображение одного блока разных ссылок scotch91 Общие вопросы Javascript 1 19.12.2015 13:08
Блок ссылок с полосой прокрутки sergofedor06 (X)HTML/CSS 22 22.11.2015 07:06
Плавное сворачивание/разворачивание ссылок Vitaliy21 jQuery 3 01.05.2013 00:11
формирование ссылок на все каталоги пути данного HTML документа vitaxa3581 Общие вопросы Javascript 2 15.12.2012 01:06