Tengo una fila de imágenes, cada una envuelta en un enlace.
Quiero que aparezca un contorno punteado alrededor de cada imagen cuando paso el mouse.
El problema es que falta el contorno del RHS 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 aparezca un contorno en los 4 lados cuando paso el mouse?
(Necesito que las imágenes coincidan entre sí sin espacios).
Probé esto en FF14, Chrome, IE9.
La forma más fácil es asignar position: relative hacia a elementos, y luego aumentar la z-index del a > img:hover (en lugar de diseñar el a:hover:
a > img {
position: relative;
}
a > img:hover {
outline: 3px dotted blue;
z-index: 3000;
}
Solo agrega position: relative; z-index: 1000 a su :hover estilo: violín actualizado
Actualizado: En realidad, ni siquiera necesitas el z-indexel posicionamiento relativo por sí solo logra su objetivo.
Lo que podría hacer es configurar el borde de cada imagen para que sea sólido de 1 px, cualquiera que sea el color de fondo, luego en img:hover usted establece el borde a lo que quiere. Aquí hay un jsFiddle que funciona de lo que estoy hablando:
http://jsfiddle.net/P3WBG/12/
-
+1, esta es probablemente una mejor respuesta que la mía, y un pequeño truco ingenioso.
– Brandón
03/08/2012 a las 20:00
-
¿Cómo cubre eso el requisito de que las imágenes deben tener una distancia cero entre ellas?
– lanzz
3 de agosto de 2012 a las 20:03
-
Ese nunca fue un requisito, el requisito era que se toparan entre sí sin espacios. El mío no produce huecos y funciona sin tener que usar un
position: relativehack, que estaba tratando de evitar.– Vap0r
03/08/2012 a las 20:05
-
Me temo que no es adecuado para mí, ya que las imágenes tienen que chocar entre sí, ya que forman parte de una imagen más grande sin costuras (supongo que debería haber sido más explícito). Gracias de todos modos.
– planta araña0
3 de agosto de 2012 a las 20:09
-
Es muy explícito:
I need the images to butt up to each other without gaps. estas produciendo fondo sin espacios, no imágenes sin espacios entre ellas; si se usa con imágenes no transparentes que en realidad tienen contenido hasta el borde, tendrán brechas muy obvias.– lanzz
03/08/2012 a las 20:10
@Brandon, eso es lo que pensé. Y luego hice clic en ‘ejecutar’ nuevamente y, de repente, aparecieron imágenes válidas.
–David Tomás
3 de agosto de 2012 a las 19:57
@Brandon, son imágenes válidas. ¿O hay una mejor manera de hacer esto?
– planta araña0
03/08/2012 a las 20:10
@spiderplant0, no, fue mi error. Las imágenes son realmente válidas, solo necesitaba ejecutar JSFiddle primero. Lo siento.
– Brandón
3 de agosto de 2012 a las 20:11