Esquema que se oculta por el siguiente elemento

Question

Tengo una fila de imágenes, cada una envuelta en un enlace.

Quiero que aparezca un contorno punteado alrededor de cada imagen cuando mueva el mouse.

El problema es que el esquema en el RHS no se encuentra en todas las imágenes excepto en la última.

Es como si las imágenes se superpusieran al contorno de la imagen a su izquierda.

De todos modos para hacer que un contorno aparezca en los 4 lados cuando vuelo?

(necesito las imágenes a tope el uno al otro sin dejar huecos.)

He intentado esto en FF14, cromo, IE9.

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

Answer 1

La forma más sencilla es asignar position: relative a los a elementos, y luego aumentar la z-index del a > img:hover (en lugar de labrar la a:hover:.

a > img { 
    position: relative; 
} 

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

JS Fiddle demo

Answer 2

Lo que podría hacer que se establece entre las imágenes frontera para ser sólido 1px cualquiera que sea el color de fondo es, entonces img:hover configura la frontera a lo que desea. Aquí está una jsFiddle de trabajo de lo que estoy hablando:
http://jsfiddle.net/P3WBG/12/

Answer 3

Sólo tiene que añadir a su estilo position: relative; z-index: 1000:hover: updated fiddle

Actualizado: De hecho, usted ni siquiera necesita el z-index, posicionamiento relativo por sí mismo logra su objetivo.