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 trigger self hover on child element

    How to prevent this H2-tag from half disappearing?

    PrimeFaces: how to override CSS class

    How to Make Text Stay Inside Div?

    how to change a css background onclick

    How to get an automatic effect of rosace in css ?

    How to style diff implementation for PHP with CSS

    How to override inline CSS without using !important or javascript?

    How to Extend Wrapped Elements to the Full Browser Width Using CSS?

    How to override CSS? [closed]

    How to give cross browser transparency to element's background only?

    How to test a CSS parser?

    How do I remove the gap between the header and image slider

    How to keep div visible when hovering another div

    JS/CSS: How to change z-index value after scrolling down past 1200 pixels (in height)?

    Css styling without !important - how to do this?

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    How well does iOS / mobile safari comply with modern browser standards?

    How to apply the CSS of navbar-inverse in twitter-bootstrap

    CSS hide/show effect works on Firefox but not on Chrome/Safari

    How to make a HTML NavBar [closed]

    How can I resize svg using CSS?

    CSS : How can I add shadow to a label or box

    960 grid css : How do I change vertical padding between divs?

    How can I get these span elements to expand to fill their full height?

    How to make an iFrame window scrolls with overflow:hidden?

    Bootstrap dropdown div not showing in non-collapsed view

    background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    CSS - how to make content fit to the width/height of paragraph?

    How to convert HTML button to HTML input, while keeping all CSS?