Maison >interface Web >tutoriel CSS >Comment ajouter une bordure à un élément au survol de la souris en utilisant CSS ?
Comment ajouter une bordure à un élément au survol de la souris en utilisant CSS ?
- WBOYavant
- 2023-09-15 14:33:031506parcourir
CSS offre aux développeurs la puissante capacité de personnaliser et de styliser leurs pages comme ils le souhaitent. L'une des nombreuses fonctionnalités qu'il offre pour permettre ce niveau de personnalisation est la possibilité d'ajouter de l'interactivité aux éléments Web. Les effets de survol peuvent offrir une expérience utilisateur plus dynamique. En appliquant une bordure à un élément au survol de la souris, les utilisateurs obtiennent un signal visuel indiquant qu'ils ont interagi avec l'élément.
Grammaire
selector:hover {
/* CSS property and values to be applied on hover */
}
: Sélecteur de survol
Le sélecteur :hover en CSS est utilisé pour appliquer des styles à un élément lorsque le curseur de la souris le survole.
Ici, le sélecteur fait référence à l'élément auquel le style doit être appliqué lorsque la souris passe dessus.
Méthode
Avec CSS, il est facile d’ajouter une bordure à un élément au survol de la souris. Nous utiliserons le sélecteur :hover mentionné ci-dessus pour accéder à l'élément en survol. Nous ajouterons une propriété border à l'élément pour lui ajouter une bordure lorsqu'il sera survolé.
Exemple
La section HTML suivante consiste à faire office de conteneur, où trois éléments
sont présents. Ces balises
agissent comme des éléments auxquels nous appliquerons plus tard l'effet de survol en utilisant CSS.
En parlant de la deuxième section CSS, nous utilisons la section CSS pour ajouter du style à la page Web. Nous avons utilisé le sélecteur :hover. Nous y avons spécifié la règle de style afin que chaque fois que l'utilisateur survole un élément
, une bordure apparaisse autour de cet élément.
<!DOCTYPE html>
<html>
<head>
<title>How to add border to an element on mouse hover using CSS?</title>
<style>
p:hover{
padding: 2px;
border: 2px solid black;
}
</style>
</head>
<body>
<h4>How to add border to an element on mouse hover using CSS?</h4>
<div>
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
</body>
</html>
Conclusion
Enfin, tirer parti du CSS pour inclure des contours dans les composants au survol de la souris est un moyen simple et efficace d'améliorer l'attrait visuel de votre site Web et l'engagement des consommateurs. En intégrant cette fonctionnalité, les artisans et les programmeurs peuvent créer une expérience de navigation plus engageante et collaborative pour les consommateurs. De plus, l'adaptabilité du CSS permet la personnalisation et les essais avec différents styles de contour et impressions. Avec un peu d'ingéniosité et d'originalité, les possibilités de créer des motifs fantastiques et inégalés sont infinies. Dans l’ensemble, ce tutoriel fournit un manuel complet sur la façon d’obtenir ce résultat, et avec un peu de formation, n’importe qui peut maîtriser cette technique CSS peu courante mais percutante.
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!