Андрей111111,
учебник вверху, сообщения можно редактировать, а не новые писать с тем же содержанием.
медитируйте ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Эффект перекатывания</title>
<style>
a.rollover {
background: url(http://htmlbook.ru/example/images/mark.png); /* Путь к файлу с исходным рисунком */
display: inline-block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
a.rollover:hover, a.rollover.active, #menu:hover a.rollover.active:hover {
background-position: 0 -40px; /* Смещение фона */
}
#menu:hover a.rollover.active {
background-position: 0 0;
}
</style>
</head>
<body>
<nav id="menu"><a href="link.html" class="rollover"></a><a href="link.html" class="rollover"></a><a href="link.html" class="rollover"></a><a href="link.html" class="rollover"></a></nav>
<script>
window.addEventListener('DOMContentLoaded', function() {
var menu = document.querySelector('#menu'),
a = menu.querySelectorAll('.rollover');
menu.addEventListener('click', function(event) {
var el = event.target, cls = el.classList;
if(cls && cls.contains('rollover')) {
event.preventDefault();
[].forEach.call( a, function(lnk) {
lnk == el ? lnk.classList.toggle('active'): //или lnk.classList.add('active')
lnk.classList.remove('active');
});
}
});
});
</script>
</body>
</html>