title: Outline getting hidden by the next element
body: <p>I have a row of images, each wrapped in a link.</p>
  
  <p>I want a dotted outline to appear around each image when I hover the mouse.</p>
  
  <p>The trouble is, the outline on the RHS is missing from all but the last image.</p>
  
  <p>Its as if the images are overlapping the outline of the image to its left.</p>
  
  <p>Anyway to make an outline appear on all 4 sides when I hover?</p>
  
  <p>(I need the images to butt up to each other without gaps.)</p>
  
  <p>I tried this out on FF14, chrome, IE9.</p>
  
  <p><a href="http://jsfiddle.net/spiderplant0/P3WBG/" rel="noreferrer">http://jsfiddle.net/spiderplant0/P3WBG/</a></p>