Отображение блока при наведении

Тема в разделе "JavaScript", создана пользователем NikroVir, 6 окт 2018.

  1. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    338
    Симпатии:
    109
    Для начала предлагаю ознакомиться со структурой здесь: https://jsfiddle.net/NikroVir/nysLu63j/
    (добавил hover эффект для наглядности, но он отображает не всё что мне нужно. смотрим текст дальше =))

    Отличный пример желаемого - "Рубрики" на сайте tass.ru

    В общем нужно сделать так, чтобы при наведении на пункты меню, отображался блок с контентом соответствующий этому пункту. По умолчанию отображается контент первого пункта меню. При наведении на другой пункт меню, отображается блок соответствующий этому пункту. При убирании курсора с блока с контентом, или пункта меню, последний открытый блок с контентом не должен пропадать.

    Заранее спасибо за помощь, ибо js и jq не моё...
     
  2. BaNru

    BaNru

    Регистр.:
    20 ноя 2008
    Сообщения:
    155
    Симпатии:
    69
  3. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    338
    Симпатии:
    109
    Близко, но не совсем оно =) Как говорил ранее, надо чтобы по умолчанию, пока ни куда не наведено, отображался блок, относящийся к первому пункту меню...
     
  4. BaNru

    BaNru

    Регистр.:
    20 ноя 2008
    Сообщения:
    155
    Симпатии:
    69
    NikroVir и L2Banners нравится это.
  5. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    338
    Симпатии:
    109
    Только заметил, что вы решили перманентно отображать блок с контентом посредством css, что опять же не подходит, т.к. если блок любого из других пунктов будет меньше первого, просто будет отображаться кусок ненужного блока...
    Конечно, это можно решить добавлением класса active к первому advant_hover и удалением hover эффекта к нему, но этот вариант тоже не очень, т.к. advant содержит блоки со стилями, реагирующими на hover.

    И ещё: не понимаю почему, но на проекте консоль выдаёт Uncaught TypeError: Cannot read property 'classList' of null к строке e.target.nextElementSibling.classList.add('active') хотя структура такая же...
     
  6. BaNru

    BaNru

    Регистр.:
    20 ноя 2008
    Сообщения:
    155
    Симпатии:
    69
    NikroVir нравится это.
  7. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    338
    Симпатии:
    109
    Наверное я уже Вам надоел, но и этот вариант не работал до тех пор, пока не разобрался что к чему)
    Дело в том, что структуру я указал в общих чертах (и думал что этого будет достаточно, но нет...), но на самом деле advant содержит ссылку:
    HTML:
    <ul class="objects">
        <li>
            <div class="advant"><a href="">Lorem ipsum</a></div>
            <div class="advant_hover">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, minima voluptates cumque facilis. Minus esse quis voluptatem ad. Repellendus voluptate, hic laudantium facere. Explicabo mollitia eligendi incidunt nulla sed, rem.</div>
        </li>
        <li>
            <div class="advant"><a href="">Lorem ipsum</a></div>
            <div class="advant_hover">2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, minima voluptates cumque facilis. Minus esse quis voluptatem ad. Repellendus voluptate, hic laudantium facere. Explicabo mollitia eligendi incidunt nulla sed, rem.</div>
        </li>
        <li>
            <div class="advant"><a href="">Lorem ipsum</a></div>
            <div class="advant_hover">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, minima voluptates cumque facilis. Minus esse quis voluptatem ad. Repellendus voluptate, hic laudantium facere. Explicabo mollitia eligendi incidunt nulla sed, rem.</div>
        </li>
    </ul>
    И из-за этого Ваш код не работает, но увы я не могу поступиться этим функционалом, поэтому помогите ещё раз =)
     
  8. BaNru

    BaNru

    Регистр.:
    20 ноя 2008
    Сообщения:
    155
    Симпатии:
    69
    NikroVir нравится это.
  9. BaNru

    BaNru

    Регистр.:
    20 ноя 2008
    Сообщения:
    155
    Симпатии:
    69
    Оффтоп:
    А куда на фидле могли деться мои примеры?
    Кто их мог удалить без моего ведома?!
     
  10. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    338
    Симпатии:
    109
    Вероятно Вы форкнули мой фидл, который я удалил, а они полетели следом. Но это не точно...
     
    BaNru нравится это.