Некоторые проблемы с аккордеоном CSS и HTML

Question

Я начал писать систему свертывающихся меню на CSS и HTML (AKA на гармошке).Я следовал учебнику, опубликованному здесь , однако мне пришлось немного его изменить.Вместо использования тегов <a> и <p> мне пришлось использовать теги <div>, потому что я добавлю изображения в оба «раздела» на более позднем этапе.После того, как я изменил теги <a> и <p> на теги <div>, выдвижное содержимое не отображается, когда указатель мыши находится над полем.Только когда мышь отведена, содержимое отображается на короткое время, прежде чем «ящик» убирается.Я разместил свой код ниже, и любая помощь будет очень признательна.

Ссылка на мой CSS: http://cl.ly/Cuoe Ссылка на мой HTML: http://cl.ly/Cuhf

Большое спасибо.

Answer 1

Думаю, проблема в том, что ваше #accordion div:hover правило CSS теперь ловит как item div, так и itemTitle и itemContent div внутри элемента.

В вашем CSS-файле попробуйте заменить оба экземпляра #accordion div:hover на #accordion div.item:hover. Это заставит правило применяться только к div с классом item.

Редактировать: Вы также можете просто изменить его на #accordion .item:hover

Answer 2

Проверьте эту скрипку: http://jsfiddle.net/ufPrF/

Проблема заключалась в том, что вы установили свойство высоты на #accordion div:hover, которое влияло на все <div>s внутри аккордеона (включая заголовок, содержимое и т. Д.). Вы должны были либо сделать #accordion > div:hover ИЛИ #accordion .item:hover (как в скрипке)