Contour se cache par l'élément suivant

J'ai une rangée d'images, chacune enveloppée dans un lien.Contour se cache par l'élément suivant

Je souhaite qu'un contour en pointillé apparaisse autour de chaque image lorsque je passe la souris. Le problème est, le contour sur le RHS est manquant de toutes sauf la dernière image.

C'est comme si les images chevauchaient le contour de l'image à sa gauche. De toute façon, pour faire apparaître un contour sur les 4 côtés lorsque je fais du vol stationnaire?

(j'ai besoin des images pour buter les uns aux autres sans lacunes.)

J'ai essayé sur FF14, chrome, IE9.

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

Source

2012-08-03 spiderplant0

@Brandon, c'est ce que je pensais Et puis j'ai cliqué sur 'courir' à nouveau, et, soudainement, des images valides étaient là –

@Brandon, ce sont des images valides Ou y a-t-il une meilleure façon de faire ça? – spiderplant0

@ spiderplant0, non c'était mon erreur. les images sont réellement valides, J'avais juste besoin de lancer le JSFiddle en premier. Pardon. – Brandon

Le plus simple est d'attribuer position: relative aux a éléments, puis augmenter la z-index du a > img:hover (au lieu de coiffer le a:hover.

a > img { 
    position: relative; 
} 

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

JS Fiddle demo

Source

2012-08-03 20:01:04

Ce que vous pouvez faire est de définir chaque frontière d'images à être solide 1px quelle que soit la couleur de fond est, puis sur img:hover vous définissez la frontière à ce que vous voulez. Voici un travail jsFiddle de ce dont je parle:
http://jsfiddle.net/P3WBG/12/

Source

2012-08-03 19:59:46 Vap0r

+1, c'est probablement une meilleure réponse que la mienne, et un petit truc astucieux. – Brandon

Comment cela couvre-t-il l'exigence selon laquelle les images doivent avoir une distance nulle entre elles? – lanzz

Ce n'était jamais une exigence, l'exigence était pour eux de se colleter les uns contre les autres sans lacunes. Le mien ne produit pas de trous, et fonctionne sans avoir à utiliser un hack «position: relative», que j'essayais d'éviter. – Vap0r

Il suffit d'ajouter position: relative; z-index: 1000 à leur style :hover: updated fiddle

Mise à jour: En fait, vous n'avez même pas besoin de la z-index, le positionnement relatif par lui-même accomplit votre objectif.

Source

2012-08-03 19:59:56 lanzz

Vous voulez expliquer votre downvote? – lanzz

Moi? Non coupable. – spiderplant0

Pas vous, qui a décidé de downvote. – lanzz

Contour se cache par l'élément suivant

Répondre

Questions connexes