Pouvez-vous faire "une bordure invisible"?

Question

Je suis en train de faire une barre de navigation comme un exercice.

Je suis à l'aide d' a:hover d'inclure une solide frontière autour du bouton en cours de survol. Cependant, ce qui rend tous les autres boutons de déménagement de la taille de la bordure.

Quelle est la bonne correction à ce problème? Je sais qu'il en existe d'autres (décrite ici), j'ai particulièrement essayé de faire de la frontière "être invisibles, mais prennent de la place, même lorsqu'il n'est pas plané". J'ai mis border:transparent espérant qu'il pourrait faire ce que je veux, mais il ne montre pas prendre de l'espace à tous.

Je sais que je pourrais ramasser la frontière de la couleur à être égale à l'arrière-plan et de le rendre solide, mais ce n'est pas ce que je veux. Est-il un façon saine de résoudre ce problème?

Answer 1

Que diriez-vous de border: 10px solid transparent ?

Answer 2

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 sélecteur a:hover .

Voici un exemple. Vous pouvez aussi souvent le faire avec des marges: http://jsbin.com/atoxo3

Answer 3

L'une des raisons, ce n'est pas le travail que vous attendez est parce que vous êtes seulement en appliquant display:block sur :hover, il doit être appliqué à l'élément sans l' :placez le sélecteur ou vous obtiendrez le "décalage" dimensions. Il n'est pas question que le type d'affichage que vous utilisez, vous avez juste à vous assurer qu'ils sont les mêmes, et par défaut, <a> est en ligne.

Une autre raison a quelque chose à faire avec votre abréviation frontières, vous devez ajouter un type de bordure pour la transparence de la version comme solid au lieu de none.

La technique que vous utilisez est tout à fait légitime, pas besoin de rembourrage hacks ou d'un schéma (qui n'est pas d'ajouter une dimension).

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

Essayez ceci:

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

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

Answer 4

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, qui ne sont pas pris en charge par IE 7 ou version antérieure .

Answer 5

border:transparent signifie 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.