web-dev-qa-db-fra.com

Pouvez-vous faire "une frontière invisible"?

J'essaie de faire une barre de navigation comme exercice.

J'utilise a:hover pour inclure une bordure pleine autour du bouton survolé. Cependant, cela fait déplacer tous les autres boutons de la taille de la bordure.

Quelle est la bonne solution à ce problème? Je sais qu'il y en a d'autres (discuté ici ), j'ai spécifiquement essayé de rendre la frontière "invisible mais de prendre de la place même lorsqu'elle n'est pas survolée". J'ai mis border:transparent en espérant qu'il puisse faire ce que je veux, mais cela ne montrait pas du tout prendre de la place.

Je sais que je pourrais choisir à la main la couleur de la bordure pour qu'elle soit égale à l'arrière-plan et la rendre solide, mais ce n'est pas ce que je veux. Existe-t-il une manière saine de résoudre ce problème?

htmlcssborder
40
ripper234

Que diriez-vous border: 10px solid transparent?

107
Phliplip

Votre meilleure option serait d'ajouter un remplissage ou des marges à votre élément de la même taille que la bordure et de faire en sorte que la bordure ait une largeur nulle, puis d'afficher la bordure et de supprimer le remplissage avec le a:hover sélecteur.

Voici un exemple. Vous pouvez aussi souvent le faire avec des marges.

a {
    display: inline-block;
    height: 2em; width: 100px;
    padding: 2px;
    background: #0ff;
}

a:hover {
    padding: 0;
    border :2px solid #000;
}
<a href="#">Hello World</a>
16
derekerdmann

L'une des raisons pour lesquelles cela ne fonctionne pas comme vous vous y attendez est que vous ne postulez que display:block sur :hover, il doit être appliqué à l'élément sans le sélecteur: hover ou vous obtiendrez les dimensions "décalées". Peu importe le type d'affichage que vous utilisez, il vous suffit de vous assurer qu'ils sont identiques, et par défaut <a> est en ligne.

Une autre raison a quelque chose à voir avec vos bordures raccourcies, vous devez ajouter un type de bordure pour la version transparente comme solid au lieu de none.

La technique que vous utilisez est totalement légitime, pas besoin de bourrage de hacks ou de contour (ce qui n'ajoute pas de dimension).

http://jsfiddle.net/Madmartigan/kwdDB/

Essaye ça:

#wd-navbar li a {
     border: medium solid transparent;
     display: block;
     margin: 1px;
}

#wd-navbar li a:hover {
     background-color: #F5DEB3;
     border: medium solid;
}
5
Wesley Murch

Vous pouvez utiliser la propriété CSS outline au lieu de votre bordure, qui agit comme une bordure mais n'est pas prise en compte dans les calculs de dimensionnement.

Cependant, cela a quelques problèmes, non pris en charge par IE 7 ou version antérieure .

3
Gareth

border:transparent veux dire border: transparent 0 none

Si vous ne spécifiez pas de propriété lors de l'utilisation de la syntaxe abrégée, vous réinitialisez toutes les propriétés à leurs valeurs par défaut.

Vous devez lui donner un style de bordure et une largeur de bordure.

3
Quentin

Réglage de la couleur de la bordure: transparent; Fait le travail.

a {
  border-color : transparent ;
}

a:hover {
   border-color : black;
}
0
user2647710

utilisez des pseudo-éléments ::after et ::before pour créer des frontières invisibles.

0
abhishek