@AnotherPlan

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

Есть якорь на одной странице: <a href="" id="one">Ссылка</a>
Есть ссылка на другой странице: <a href="url#one">Ссылка</a>

Прокрутка до нужного места работает. Нужно только подсветить на 10-15 секунд (заменить бэкграунд и цвет текста например на нужный).

Есть ли какое-нибудь простое в реализации решение?

ps такой вопрос был на хабре (несколько лет назад), но там не совсем то, что нужно и решения слишком громоздкие.
  • Вопрос задан
  • 218 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега CSS
Верставший фронтендер
Не совсем понятно что именно нужно подсветить.
• Если саму ссылку, на которую нужно нажать, то тут либо через css анимации(transition/keyframes), однако анимация будет зависеть от наличия конкретного состояния(наведение, focus и тд), либо же через JS. Суть та же, однако можно не зависеть от состояния, включать анимацию и выключать по таймеру. А так же есть дополнительные варианты, такие как обработчик нажатия на ссылку.
• Если цель ссылки, на которую она указывает, то тут, в целом, варианты те же. Однако, через css, например, это можно сделать воспользовавшись псевдоклассом :target htmlbook.ru/css/target, либо через js брать назначение ссылки, искать этот элемент по id и так же навешивать анимацию.

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

#one {
  color: blue;
  background-color: transparent;
}

#one:target {
// и другие параметры анимации - направление, длительность, задержка и тд. 
// в соответствии с css keyframes анимациями https://webref.ru/css/keyframes
  animation: blur 10s ease-in-out ... ;
}

@keyframes blur {
   // другие ключевые кадры
   50% {
     color: red;
     background-color: yellow;
   }
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@Softlink
Как-то так должно быть?
Ответ написан
@ArtJH
1) css hover + transition на 10s?
2) Через js при hover добавлять класс ссылке и через 10 сек удалять этот класс, у класса есть animation
Ответ написан
Комментировать
max_shane
@max_shane
Javascript / Node.js dev
Вот простое решение этой задачи:

Код должен в итоге оказаться на каждой странице где предполагается чтобы ссылки подсвечивались при переходе:

window.onload = function () {
	let url = window.location.href.split('#');
	let link_id = url[url.length-1];
	if(document.getElementById(link_id)) {
		document.getElementById(link_id).classList.add('active-link');
		setTimeout( () => document.getElementById(link_id).classList.remove('active-link'), 10000)
	}

}


.active-link {
color: red; 
/*
тут любые стили активной ссылки и транзишны которые ты хочешь
*/
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы