Correction d'un problème d'échec d'événement de survol et de clic de pseudo-élément CSS : exemple de notation par étoiles

Cet article fournit une solution détaillée au problème selon lequel le pseudo-élément CSS `:after` ne peut pas répondre à l'événement `hover` ou `click` dans le composant de notation par étoiles. En analysant la cause du problème et en la combinant avec un exemple de code, nous nous concentrons sur le rôle de deux propriétés CSS clés « position : relative » et « opacité : 0 » dans la résolution de tels problèmes. Après avoir étudié cet article, vous serez en mesure de maîtriser comment utiliser correctement les pseudo-éléments pour créer des composants d'interface utilisateur interactifs.

Dans le développement Web, l'utilisation de pseudo-éléments CSS (tels que :before et :after) peut facilement ajouter du contenu décoratif sans modifier la structure HTML. Cependant, dans certains cas, les pseudo-éléments peuvent ne pas répondre aux événements de survol ou de clic comme les éléments normaux. Cet article prendra comme exemple un composant de notation par étoiles pour expliquer en détail comment résoudre ce problème.

Analyse du problème

Dans l'exemple de classement par étoiles fourni, le pseudo-élément :after est utilisé pour créer une étoile bleue, et on espère que les événements de survol et de clic changeront la couleur de l'étoile. Cependant, le code initial présente deux problèmes principaux :

1. Le pseudo-élément est mal positionné : les étoiles bleues (pseudo-élément :after) ne sont pas positionnées par rapport à leur élément parent (libellé), ce qui les fait apparaître en haut de la page.
2. La transparence par défaut du pseudo-élément est incorrecte : l'étoile bleue doit être masquée par défaut et affichée uniquement au survol ou au clic.

solution

Pour résoudre ces problèmes, vous devez modifier le style CSS et ajouter deux propriétés clés : position : relative et opacité : 0.

1. Position définie : relative :

   Ajouter position : relative à l'élément label pour positionner le pseudo-élément par rapport à l'étiquette. Cela garantit que les étoiles bleues apparaissent dans la bonne position, c'est-à-dire en chevauchant les étoiles noires.

    .étiquette de notation {
     /* Ajout d'un rapport de position*/
     position : relative ;
     affichage : bloc ;
     curseur : pointeur ;
     largeur : 50 px ;
     arrière-plan : #ccc ;
   }

2. Définir l'opacité : 0 :

   Ajoutez opacity: 0 au pseudo-élément :after afin qu'il soit masqué par défaut. Ensuite, utilisez les pseudo-classes hover et :checked pour modifier l'opacité afin qu'elle apparaisse au survol ou à la sélection.

    .rating label::après {
     contenu : "★" ;
     position : absolue ;
     famille de polices : fontAwesome ;
     /* Définit l'opacité par défaut sur 0*/
     opacité : 0 ;
     affichage : bloc ;
     taille de police : 50 px ;
     couleur : #1f9cff ;
     haut : 0 ;
   }
   
   .rating label:hover::après,
   .rating label:hover~label::après,
   .rating input:checked~label::après {
     opacité : 1 ;
   }

Code complet

Voici le code modifié complet :

Javascript :

 var numérosDiv = document.getElementById("23");
var aa = document.createElement("div");
aa.className = "note";
pour (soit i = 0; i <p> <strong>CSS :</strong></p><pre class="brush:php;toolbar:false"> .notation {
  affichage : flexible ;
}

.entrée de notation {
  affichage : aucun ;
}

.étiquette de notation {
  /* Ajout d'un rapport de position*/
  position : relative ;
  affichage : bloc ;
  curseur : pointeur ;
  largeur : 50 px ;
  arrière-plan : #ccc ;
}

.rating label::avant {
  contenu : "★" ;
  position : relative ;
  famille de polices : fontAwesome ;
  affichage : bloc ;
  taille de police : 50 px ;
  couleur : #101010 ;
}

.rating label::après {
  contenu : "★" ;
  position : absolue ;
  famille de polices : fontAwesome ;
  /* Définit l'opacité par défaut sur 0*/
  opacité : 0 ;
  affichage : bloc ;
  taille de police : 50 px ;
  couleur : #1f9cff ;
  haut : 0 ;
}

.rating label:hover::après,
.rating label:hover~label::après,
.rating input:checked~label::après {
  opacité : 1 ;
}

HTML :

 

<t>
  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/<a%20class=" __cf_email__ data-cfemail="35535a5b41544250465a5850185347505075031b041b04">[email protégé]/css/fontawesome.min.css" rel="stylesheet" />
</t>ête>

<corps>
  <div id="23"></div>

</corps>

Choses à noter

• Assurez-vous d'inclure correctement la bibliothèque d'icônes Font Awesome afin que l'icône étoile s'affiche.
• Ajustez la taille, la couleur et le style des étoiles en fonction des besoins réels.
• Des effets plus interactifs, tels que des animations ou des transitions, peuvent être ajoutés selon les besoins.

Résumer

En définissant deux propriétés CSS clés : position : relative et opacité : 0, vous pouvez résoudre le problème selon lequel le pseudo-élément CSS : après ne peut pas répondre aux événements de survol ou de clic dans le composant de notation par étoiles. Comprendre ces concepts est crucial pour créer des composants Web interactifs. Dans le développement réel, lorsque vous rencontrez des problèmes similaires, vous pouvez vous référer aux solutions fournies dans cet article et utiliser les propriétés CSS de manière flexible pour obtenir l'effet souhaité.

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!