J'ai un tas d'images liées dans une table, avec un peu de rembourrage. Lorsque j'essaie d'ajouter un IMG: HOVER ou A: Hover Attribut frontière, lorsque la frontière apparaît, tout se déplace par la quantité de pixels épais de la bordure. Y a-t-il un moyen d'arrêter ce comportement?
3 Réponses :
img {
border: solid 10px transparent;
}
img:hover {
border-color: green;
}
Le problème est que vous ajoutez une bordure à l'élément qui prend de l'espace - les autres éléments de la page doivent bouger pour faire de la place pour cela.
La solution consiste à ajouter une bordure qui correspond à l'arrière-plan, puis changez simplement la couleur ou le style sur la survolte. Une autre possibilité est de rendre la case plus grande que vous n'avez initialement pas destinée, puis de le redimensionner pour s'adapter à la frontière que vous ajoutez.
img:hover {
border: solid 2px red;
margin: -2px;
}
Seems to work for me (Safari 6.0.5). No added space since the border is drawn on the 'inside' of the img.