Esquema que se oculta por el siguiente elemento

Tengo una fila de imágenes, cada una envuelta en un enlace.Esquema que se oculta por el siguiente elemento

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/

Fuente

2012-08-03 spiderplant0

@Brandon, que es lo que pensaba .Y luego hice clic en 'ejecutar' otra vez, y, de repente, las imágenes válidas estaban allí. –

@Brandon, son imágenes válidas. ¿O hay una mejor manera de hacerlo? – spiderplant0

@ spiderplant0, no, fue mi error. las imágenes son realmente válidas, Solo necesitaba ejecutar JSFiddle primero. Lo siento. – Brandon

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

Fuente

2012-08-03 20:01:04

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/

Fuente

2012-08-03 19:59:46 Vap0r

+1, esta es probablemente una mejor respuesta que la mía, y un pequeño truco ingenioso. – Brandon

¿Cómo cubre eso el requisito de que las imágenes tengan una distancia cero entre ellas? – lanzz

Eso nunca fue un requisito, el requisito era que ellos a tope uno contra el otro sin dejar huecos. El mío no produce huecos, y funciona sin tener que usar un hack 'position: relative', que estaba tratando de evitar. – Vap0r

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.

Fuente

2012-08-03 19:59:56 lanzz

¿Le importa explicar su voto a favor? – lanzz

¿Yo? No culpable. – spiderplant0

No eres tú, quien haya decidido rechazarlo. – lanzz

Esquema que se oculta por el siguiente elemento

Respuesta

Cuestiones relacionadas