Question

Client is requesting functionality which would allow WordPress to generate list of child pages, and when an item (text) from that list is hovered, the Featured Image would show. Here’s an example of such functionality.

Upon further research, I found this thread. However, upon review it seems as though the Petley Jones website has hardcoded all page links. I could be incorrect. I am needing wp_list_pages or perhaps get_page to be used since there will be many child pages added by staff and not one person.

I am aware of solutions using both JQuery and CSS. JQuery solution seems best for this, however I am not sure how I could go about coupling it with WordPress. CSS would require each item have the same class or ID, which I can implement, but I am not sure how to call unique page IDs within the stylesheet. Any advice would be greatly appreciated!

Answer 1

You may try to follow the following procedure-

• when you fetch your child pages wrap a div with a class name say <div class="child_page"></div> and inside it place your child page’s name’s php code.
• inside this div below the child page’s code add another div with a class say <div class="child_page_Img"></div> and inside it place the code too grab the feature image of the specific page.
• add some css in your theme’s stylesheet-

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

• since ie6 doesn’t allow hovering over any element except a element, all you can do is to place the child_page_Img div in the a element of your child pages permalink.

this trick should work.
Thanks