0


0

CSS: la bordure autour de l’image la déplace

J’ai donc mon image sur ma page Web. Dans mon code CSS, j’ai une transition pour un : hover (lueur apparaît), qui fonctionne très bien, et je veux ajouter un trait sur`: active`. Voici mon code:

#bb
{
    top: 55%;
    left: 6%;
    opacity: 0.85;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
#bb:hover
{
    opacity: 1;
    -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
    -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
    box-shadow: 0px 0px 20px rgba(255,255,255,0.75);
}
#bb:active
{
    opacity: 1;
    border: 10px solid rgba(87,87,87,0.8);
}

mes problèmes sont les suivants: comment faire apparaître le trait autour de l’image sans la déplacer, et comment la maintenir "active" sans avoir à maintenir le clic sur l’image?

2 Answer


2


Vous pouvez utiliser CSS * box-sizing: border-box; *. Écrivez comme ceci:

#bb:active
{
    opacity: 1;
    border: 10px solid rgba(87,87,87,0.8);
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}


2


Une bordure occupe de l’espace, donc l’ajout d’une bordure déplace normalement un élément. Si vous utilisez la propriété outline au lieu de` border`, aucun déplacement n’a lieu - mais le contour apparaîtra au-dessus de tout ce qui autrement apparaîtrait au même endroit, c’est-à-dire peut couvrir d’autres contenus.

La signification de «: active» a différentes interprétations dans différents navigateurs. Pour que des choses spécifiques se produisent (aussi cross-browser que possible) sur les événements du clavier ou de la souris, vous devez utiliser JavaScript.