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

NikroVir

Извращённый отшельник
Регистрация
27 Апр 2008
Сообщения
346
Реакции
117
Для начала предлагаю ознакомиться со структурой здесь: Для просмотра ссылки Войди или Зарегистрируйся
(добавил hover эффект для наглядности, но он отображает не всё что мне нужно. смотрим текст дальше =))

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

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

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

И ещё: не понимаю почему, но на проекте консоль выдаёт Uncaught TypeError: Cannot read property 'classList' of null к строке e.target.nextElementSibling.classList.add('active') хотя структура такая же...
 
Наверное я уже Вам надоел, но и этот вариант не работал до тех пор, пока не разобрался что к чему)
Дело в том, что структуру я указал в общих чертах (и думал что этого будет достаточно, но нет...), но на самом деле 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>
И из-за этого Ваш код не работает, но увы я не могу поступиться этим функционалом, поэтому помогите ещё раз =)
 
Оффтоп:
А куда на фидле могли деться мои примеры?
Кто их мог удалить без моего ведома?!
 
Оффтоп:
А куда на фидле могли деться мои примеры?
Кто их мог удалить без моего ведома?!
Вероятно Вы форкнули мой фидл, который я удалил, а они полетели следом. Но это не точно...
 
Назад
Сверху