将鼠标悬停在WordPress页面列表中的项目上会显示特色图像

时间:2012-06-09 18:22:59

标签: jquery css wordpress hover thumbnails

客户端正在请求允许WordPress生成子页面列表的功能,并且当该列表中的项目(文本)悬停时,将显示特色图像。 Here's an example of such functionality.

经过进一步研究,我发现this thread。然而,经过审查,似乎Petley Jones网站已经硬编码了所有页面链接。我可能是不对的。我需要使用wp_list_pages或者使用get_page,因为工作人员而不是一个人会添加许多子页面。

我知道使用JQuery和CSS的解决方案。 JQuery解决方案似乎是最好的,但我不知道如何将它与WordPress联系起来。 CSS会要求每个项目具有相同的类或ID,我可以实现,但我不知道如何在样式表中调用唯一的页面ID。任何建议将不胜感激!

1 个答案:

答案 0 :(得分:0)

您可以尝试按照以下步骤进行操作 -

  • 当您获取您的子页面时,请使用类名称<div class="child_page"></div>包装div并在其中放置您的子页面名称的php代码。
  • 在子页面代码下方的div中添加另一个div,其中有一个类<div class="child_page_Img"></div>,并在其中放置代码,也抓住特定页面的特征图像。
  • 在主题的样式表中添加一些css -

.child_page_Img{display:none;} .child_page:hover .child_page_Img{display:block;}

  • 因为ie6不允许将鼠标悬停在除a元素之外的任何元素上,所以您只需将child_page_Img div放在子页面的a元素中即可。< / LI>

这个技巧应该有效。 感谢