Maison > interface Web > tutoriel CSS > Comment empêcher le déplacement d'un élément lors d'un survol avec une bordure ?

Comment empêcher le déplacement d'un élément lors d'un survol avec une bordure ?

Susan Sarandon
Libérer: 2024-12-20 17:27:22
original
947 Les gens l'ont consulté

How to Prevent Element Shifting on Hover with a Border?

Bordure survolée provoquant un léger ajustement des éléments

Problème :

Une liste non ordonnée d'ancres avec un événement de survol ajoute une bordure , mais les ancres à gauche se déplacent légèrement lorsqu'elles sont survolées en raison d'une augmentation de la largeur. Comment pouvez-vous garantir un positionnement absolu ?

Solution :

L'ajout d'une bordure transparente à l'état de non-survol peut empêcher la « nervosité » lorsque la bordure de survol apparaît.

#homeheader a:visited, #homeheader a{
    border:1px solid transparent;
}
Copier après la connexion

Explication :

La bordure transparente permet la largeur de l'ancre pour rester cohérent, il n'y a donc pas de changement de positionnement lorsque la bordure de survol apparaît. Voici une démo de JSFiddle :

http://jsfiddle.net/TEUhM/3/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal