JSFiddle

jeffhalligan's public fiddles

• tnRkr

  jQuery 1.8.3, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• rAbaf

  jQuery 1.7.2, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Answer to jhalligan's question

  In answer to http://forum.jquery.com/topic/help-please-i-think-this-is-a-relatively-easy-image-swap-solution-but-for-the-life-of-me-i-cant-seem-to-get-it#14737000003574523 Simply, all you need to do is create a new class called something like "show" and write a quick jQuery event handler (or plain JavaScript if you'd prefer) to add the class to the <p> element when mouse enters an element. When mouse enters an element the first action should be to remove the "show" class from all <p>'s before then setting the single one you want. You'll notice I have removed all the styling into the CSS because I couldn't see wood from trees, and I have removed the <span> which isn't presently being used. When you productionise your code you'd also probably benefit from using repeating relative positioning instead of using absolute positions each time.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• f2kmJ

  jQuery 1.8.3, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• akn6J

  Mootools 1.4.5, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• FbBvu

  jQuery 1.8.3, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra