Как подсветить блок с сылкой якорем?

Question

[Капитан Какао]

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

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

<a href="/top100#23">Я ссылка</a>

На второй странице, куда ведёт ссылка такие блоки:

<div id="22">контент</div>
<div id="23">контент</div>
<div id="24">контент</div>

И вот нужно что бы при переходе background блока с ID указанным в ссылке становился жёлтым, и плавно в течении 10 секунд переходил обратно в белый.
Хотелось бы на чистом CSS это реализовать, без JS. Если конечно это возможно.

Answer 1

[Евгений Петров]

@keyframes select{
	0%{
		background:#d8277b;
	}
}
@-webkit-keyframes select{
	0%{
		background:#d8277b;
	}
}
.block:target{
	animation:select 5s linear;
	-webkit-animation:select 5s linear;
}
.block{
	background:#2cd384;
}

Answer 2

[Alexander Tartmin]

Ну без JS не выйдет никак
Я не знаю есть ли такой плагин (конечно есть, просто искать Вам лень =)) но все что вам нужно это:
ссылке где якорь задать какой-то уникальный id и на жеквери написать следующее

$('#link').click(function(e) {
    e.preventDefault(); //эта строка не даст при нажатии на ссылку в адресной строке появится такого: http://site.ru/#link
});

Затем Вам нужно взять атрибут href из этой ссылки (код ищите сами или ничего не нучитесь) и по этому параметру вытащить id блока который будем подсвечивать желтым.
А далее идем и гуглим ".animate()"

Comments

[Капитан Какао]

"эта строка не даст при нажатии на ссылку в адресной строке появится такого: site.ru/#link"

Так мне нужно что бы эта ссылка была в адресной строке)

[Alexander Tartmin]

ну тогда те строчки не используйте, идите дальше по моей инструкции =)