CSS和HTML手风琴的一些问题

Question

我已经开始编写CSS和HTML折叠菜单系统（AKA手风琴）。我按照here发布的教程，然而，我不得不稍微改变它。我不得不使用<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。这将导致规则仅适用于具有类item的div。

修改：您也可以将其更改为#accordion .item:hover

Answer 2

检查这个小提琴：http://jsfiddle.net/ufPrF/

问题在于你在#accordion div:hover上设置了一个高度属性，它影响了手风琴中的所有<div>s（包括标题，内容等）。您应该完成#accordion > div:hover或#accordion .item:hover（就像在小提琴中一样）