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

[NikroVir]

Для начала предлагаю ознакомиться со структурой здесь: Для просмотра ссылки Войди или Зарегистрируйся
(добавил hover эффект для наглядности, но он отображает не всё что мне нужно. смотрим текст дальше =))

Отличный пример желаемого - "Рубрики" на сайте Для просмотра ссылки Войди или Зарегистрируйся

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

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

 

[BaNru]

Для просмотра ссылки Войди или Зарегистрируйся

 

[NikroVir]

Для просмотра ссылки Войди или Зарегистрируйся

Близко, но не совсем оно =) Как говорил ранее, надо чтобы по умолчанию, пока ни куда не наведено, отображался блок, относящийся к первому пункту меню...

 

[BaNru]

Для просмотра ссылки Войди или Зарегистрируйся

 

[NikroVir]

Для просмотра ссылки Войди или Зарегистрируйся

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

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

 

[BaNru]

Для просмотра ссылки Войди или Зарегистрируйся

 

[NikroVir]

Для просмотра ссылки Войди или Зарегистрируйся

Наверное я уже Вам надоел, но и этот вариант не работал до тех пор, пока не разобрался что к чему)
Дело в том, что структуру я указал в общих чертах (и думал что этого будет достаточно, но нет...), но на самом деле advant содержит ссылку:

<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>

И из-за этого Ваш код не работает, но увы я не могу поступиться этим функционалом, поэтому помогите ещё раз =)

 

[BaNru]

Для просмотра ссылки Войди или Зарегистрируйся

 

[BaNru]

Оффтоп:
А куда на фидле могли деться мои примеры?
Кто их мог удалить без моего ведома?!

 

[NikroVir]

Оффтоп:
А куда на фидле могли деться мои примеры?
Кто их мог удалить без моего ведома?!

Вероятно Вы форкнули мой фидл, который я удалил, а они полетели следом. Но это не точно...