1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

Смена при наведении CSS

Тема в разделе "Web Coding", создана пользователем NOIP, 15 янв 2020.

Модераторы: latteo
  1. NOIP

    NOIP

    Регистр.:
    17 фев 2008
    Сообщения:
    305
    Симпатии:
    62
    Здравствуйте, есть сайт


    Вытащил отвечающий код за данное действие при наведение.



    Но у меня не работает, помогите вытянуть нужный код, кто увидит что я забыл? .
     
  2. giorno

    giorno

    Регистр.:
    18 сен 2017
    Сообщения:
    182
    Симпатии:
    108
    там используется добавление класса при наведении курсора

    добавьте

    Код:
    $('.jet-animated-box').hover(
      function() {
        $(this).addClass('flipped');
      }, function() {
        $(this).removeClass('flipped');
      }
    );
     
  3. NOIP

    NOIP

    Регистр.:
    17 фев 2008
    Сообщения:
    305
    Симпатии:
    62
    Подключил
    Код:
    <script type='text/javascript' src='/js/jquery/jquery.js?ver=1.12.4-wp'></script>
    и добавил
    Код:
    <script type="text/javascript">
    
    $('.jet-animated-box').hover(
      function() {
        $(this).addClass('flipped');
      }, function() {
        $(this).removeClass('flipped');
      }
    );
    
    </script>
    Не заработало.

    Вот ссылка с правками https://jsfiddle.net/92a1b87e/
     
    Последнее редактирование: 16 янв 2020
  4. giorno

    giorno

    Регистр.:
    18 сен 2017
    Сообщения:
    182
    Симпатии:
    108
    Код:
     (function($){
    
    $(document).ready(function() {
                $('.jet-animated-box').hover(
      function() {
        $(this).addClass('flipped');
      }, function() {
        $(this).removeClass('flipped');
      }
    );
            });
    
      })(jQuery);
     
    NOIP нравится это.
  5. cx717

    cx717 Писатель

    Регистр.:
    14 ноя 2019
    Сообщения:
    4
    Симпатии:
    3
    Можно без javascript обойтись - одним css.
    Прикрепил демку.
     

    Вложения:

    • demo.zip
      Размер файла:
      131,6 КБ
      Просмотров:
      8
    NOIP нравится это.
  6. v3w

    v3w Писатель

    Регистр.:
    10 фев 2015
    Сообщения:
    5
    Симпатии:
    0
    По сути сути там надо в onhover событтие прописать псевдокласс
     
  7. garphild

    garphild Постоялец

    Регистр.:
    19 май 2009
    Сообщения:
    56
    Симпатии:
    31
    Вообще hover и onMouseIn/Out/Enter/Leave на которых основан hover противные события. У них есть некоторая задержка и если быстро-быстро переместить курсор за пределы страницы, то javascript не применит событие onMouseOut и элемент останется в том виде как будто на него наведена мышка. Особенно это проявляется на сложных интерфейсах, где много листенеров. К примеру список товаров интернет-магазина. Поэтому реально лучше использовать :hover из CSS.
     
  8. L2Banners

    L2Banners Постоялец

    Регистр.:
    15 сен 2017
    Сообщения:
    78
    Симпатии:
    28