Hovering over item in WordPress list of pages shows Featured Image


Tags: jquery,css,wordpress,hover,thumbnails

Problem :

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!



Solution :

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


    CSS Howto..

    How to use CSS transition effects

    How many digits after the decimal point are interpreted in stylesheet rules?

    How volume button is generated [closed]

    How to make a grid of interactive elements?

    How to scroll with large pages with jQuery onepage-scroll plugin?

    How can i display images horizontally using PHP and mysql?

    How to create hover effects for all links EXCEPT the one you hover on using javascript/jquery/css?

    how to change color of selected menu in css or jquery [closed]

    How to implement a finished coded html/css page into CMS [closed]

    How to use scrollRevealJS alongside AnimateCSS?

    How to set background texture to 50% of the page in css

    CSS: how to cascade class-specific style to children [closed]

    How to remove CSS spaghetti in legacy web app?

    how to div.width css property using js or jquery?

    Dropdown Menu will move all
    Below. How to prevent it?

    How to embedded all resources(css,js,images) into one single html file?

    JQuery: How to add a CSS class to a HTML button?

    HTML element positioning - How do I have an element always stay in the visible area without javascript

    How to ignore CSS img styling for certain sections of the website?

    How to fix responsive drop down menu using css?

    How To Dark Image Background in CSS on hover?

    Where Can I Learn How To Fit A Website To Fit Many Android Resolutions?

    How to place the text after thumbnails at the bottom?

    How to create a progress dialog when switching the webpages?

    How to solve this HTML/CSS bug? [closed]

    How to change placeholder color on focus?

    HTML/CSS Fluid Grid: How to overlay div to another div

    How do I put my content in a box?

    How to align elements equally in a line in CSS/Bootstrap?

    How to make the slider move right and left alternatively