Comment puis-je styliser les survols de la souris sur les cartes d'images avec CSS ?

Styler les survols de souris sur les cartes d'images avec CSS

Les cartes d'images offrent un moyen pratique de créer des zones cliquables dans une image. Cependant, par défaut, ces zones manquent de retour visuel au survol. CSS offre des options limitées pour styliser les survols de la souris sur les cartes d'images, mais voici une solution pour ajouter une touche subtile d'interactivité :

Approche :

Utilisation de :hover sur Divs ou Anchor Balises

• Créez des balises div ou d'ancrage transparentes positionnées directement sur le cliquable zones.
• Définissez initialement l'opacité de ces éléments sur 0.
• Ajoutez un style à l'état :hover de ces éléments pour modifier leur opacité, créant ainsi un effet de survol visible.

Exemple :

<a></a>

.area {
  background: #fff;
  display: block;
  height: 475px;
  opacity: 0;
  position: absolute;
  width: 320px;
}
#area2 {
  left: 320px;
}
#area1:hover, #area2:hover {
  opacity: 0.2;
}

Dans cet exemple, le La classe .area définit le style des balises transparentes div ou d’ancrage. La règle :hover modifie l'opacité à 0,2 lors du survol des zones cliquables, fournissant ainsi un effet de surbrillance subtil.

Remarque : Cette approche n'est pas garantie de fonctionner dans tous les navigateurs en raison des limitations. de CSS dans le style des cartes d'images. Cependant, il fournit une solution relativement simple pour ajouter des effets de survol de base aux zones de carte-image.

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!