Показать сообщение отдельно
  #60 (permalink)  
Старый 28.05.2017, 17:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

Андрей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>
Ответить с цитированием