1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

Добавление эффектов при наведение мышкой на узел (раздел)

Тема в разделе "Модификации шаблонов", создана пользователем GAM, 23.12.2012.

Загрузка
  1. GAM

    GAM Местный

    Регистрация:
    28.04.11
    Сообщения:
    326
    Симпатии:
    159
    Версия XF:
    1.1.3
    Когда вы наводите мышкой например на раздел, то он красиво отступает в право

    x_a15d2b34.jpg

    Открываем header и вставляем:
    PHP:
    <script type="text/javascript">
    $(
    document).ready(function(){
    $(
    "h3 a").hover(function(){
        $(
    this).stop().animate({marginLeft:"10px"},300);}
      ,function(){
        $(
    this).stop().animate({marginLeft:"0px"},300);
    });
    });
    </script>
    Вот и все =)
     
    KOS9I4OK, Makar, Киря и 9 другим нравится это.
  2. vovik1646

    vovik1646 Местный

    Регистрация:
    15.12.12
    Сообщения:
    88
    Симпатии:
    12
    Версия XF:
    1.2.4
    прикольно
     
  3. Тёмка

    Тёмка Read only

    Регистрация:
    05.05.13
    Сообщения:
    58
    Симпатии:
    1
    Версия XF:
    1.2.3
    Последнее редактирование модератором: 22.12.2013
  4. Вадим Белый

    Вадим Белый Местный

    Регистрация:
    21.05.14
    Сообщения:
    9
    Симпатии:
    1
    Версия XF:
    1.3.2
    Последнее редактирование: 09.07.2014
  5. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия XF:
    1.4.0
    В первом случае скрипт применяется для всех ссылок заключенных в тег <h3>....</h3>, то есть для заголовков, значит примененный hover-эффект будет действовать не только для названий разделов. Во втором вообще для всех ссылок.
    Если хотите выделить именно название раздела, то надо в node_list.css задать классу nodeTitle желаемое, но его надо обозначить ссылкой:
    Код:
    .nodeTitle a:hover
     
  6. FractalizeR

    FractalizeR XenForo Addicted

    Регистрация:
    27.09.10
    Сообщения:
    1 085
    Симпатии:
    832
    Версия XF:
    1.3.2
    Можно и так:

    PHP:
    <script type="text/javascript">
    $(
    document).ready(function(){
    $(
    ".nodeTitle>a").hover(function(){
        $(
    this).stop().animate({marginLeft:"10px"},300);}
      ,function(){
        $(
    this).stop().animate({marginLeft:"0px"},300);
    });
    });
    </script>
     
    94KONG и Mirovinger нравится это.
  7. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия XF:
    1.4.0
    :) а можно и не применять вообще скрипта, просто в стилях задать
    --- добавлено : 9 июл 2014 в 17:17 ---
    Плавный переход цвета
    Код:
    .nodeTitle a:hover {
       color:#f00;
       -webkit-transition:color 500ms ease-in;
       -moz-transition:color 500ms ease-in;
       -o-transition:color 500ms ease-in;
       transition:color 500ms ease-in;
    }
    Тень
    Код:
    .nodeTitle a:hover {
        text-shadow: 1px 1px 1px rgba(0,0,0,.4);
    }
    Смещение
    Код:
    .nodeTitle a:hover {
        position: relative;
        top: 2px;
    }
    Здесь задано смещение вниз, можно задать так же в лево, вправо, вверх.

    Прозрачность
    Код:
    .nodeTitle a {
        opacity: .5;
    }
    .nodeTitle a:hover {
        opacity: 1;
    }
     
    Последнее редактирование модератором: 17.07.2014
    StroOke, Alex777, Abaddon и 2 другим нравится это.
  8. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия XF:
    1.4.0
    Можно еще использовать псевдокласс :visited, это позволит придать эффект для посещенных разделов, например если разделы у Вас синим цветом, после входа в него, цвет поменяется на другой. Удобно будет, видно просмотренные разделы.
    Код:
    .nodeTitle a:visited
     
    vips и Mirovinger нравится это.
  9. Вадим Белый

    Вадим Белый Местный

    Регистрация:
    21.05.14
    Сообщения:
    9
    Симпатии:
    1
    Версия XF:
    1.3.2
    ещё мы можем навесить тебе скрипт, чтоб ты мог запускать скрипт. когда запускаешь скрипт xD
     
  10. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия XF:
    1.4.0
    Чет не понял, к чему это?
     
  11. Вадим Белый

    Вадим Белый Местный

    Регистрация:
    21.05.14
    Сообщения:
    9
    Симпатии:
    1
    Версия XF:
    1.3.2
    [​IMG]

    Это я к тому, что напишите уже ВЕРНОЕ И ЕДИНСТВЕННО ЧЁТКОЕ РЕШЕНИЕ проблемки
     
    Последнее редактирование: 11.07.2014
  12. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    230
    Версия XF:
    1.4.0
    А то оно и было! :). Ты даже не понял о чем речь, так и зачем троллить.
     
    sabotage1999 нравится это.
  13. Вадим Белый

    Вадим Белый Местный

    Регистрация:
    21.05.14
    Сообщения:
    9
    Симпатии:
    1
    Версия XF:
    1.3.2
    Не троллил я никого. Просто немного юмора по теме:)
     
  14. jannet

    jannet Новичок

    Регистрация:
    21.08.19
    Сообщения:
    7
    Симпатии:
    0
    А как сделать что бы линия цветная при наведении например на раздел вокруг выдвигались две цветнызх линии сверху и с низу????
     

Поделиться этой страницей