Outline getting hidden by the next element

Question

I have a row of images, each wrapped in a link.

I want a dotted outline to appear around each image when I hover the mouse.

The trouble is, the outline on the RHS is missing from all but the last image.

Its as if the images are overlapping the outline of the image to its left.

Anyway to make an outline appear on all 4 sides when I hover?

(I need the images to butt up to each other without gaps.)

I tried this out on FF14, chrome, IE9.

http://jsfiddle.net/spiderplant0/P3WBG/

Answer 1

The easiest way is to assign position: relative to the a elements, and then increase the z-index of the a > img:hover (instead of styling the a:hover:

a > img {
    position: relative;
}

a > img:hover {
    outline: 3px dotted blue;
    z-index: 3000;
}

JS Fiddle demo.