Maison > Article > interface Web > 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:031473parcourir

如何使用 CSS 在鼠标悬停时向元素添加边框？

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!

css html 选择器 border

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Hériter d'une classe dans un autre fichier dans SassArticle suivant：Hériter d'une classe dans un autre fichier dans Sass

Articles Liés

Voir plus