Les feuilles de style en cascade (CSS) sont conçues à l'aide du ou XML (y compris XHTML, SVG). Il s'agit d'un langage de feuille de style principalement utilisé pour décrire des éléments à travers une série variée de méthodes de formatage. L'une des méthodes consiste à survoler et dans cet article, nous comprendrons le survol en CSS de la manière suivante:

• Qu'est-ce que le survol en CSS?
• Où est utilisé le survol?
• Que fait Hover?
• Compatibilité
• Comment ça marche?
• Passez la couleur d'arrière-plan à 'Rouge'
• Création d'une opacité de survol sur les images
• Création d'une superposition de texte sur les images

Qu'est-ce que le survol en CSS?

Le survol CSS est un composant de sélection utilisé pour styliser différents éléments lorsque le pointeur de la souris les survole. Ils peuvent être utilisés sur presque tous les éléments HTML. La fonction de survol de CSS revêt une importance considérable dans la conception de pages Web.

Le composant de survol peut mettre en évidence, encoder et personnaliser des pages Web selon les préférences de l'utilisateur dans un programme de conception Web compact et efficace.

trouver le plus grand nombre en java

Où est utilisé le survol?

Les exemples les plus courants de la viabilité de la fonction de survol peuvent être mis en évidence sur les principaux sites Web commerciaux tels que Flipkart et Amazon. Lorsque les utilisateurs survolent n'importe quel produit sur ces sites Web de commerce électronique, le produit est programmé pour exécuter une fonction de survol automatique du zoom afin de fournir au client une meilleure vue de ses produits sélectionnés. Grâce à cette programmation, la page Web est conçue pour afficher une vue compacte de l'ensemble de la gamme de produits accompagnée d'une vue détaillée du produit d'intérêt dans une seule conception de page Web.

Que fait Hover?

Le survol est un outil de programmation multifonctionnel grâce auquel l'utilisateur peut personnaliser l'élément cible avec un nombre infini de critères de formatage. Certains exemples du savoir-faire opérationnel de la fonction de survol incluent:

• Modification de la couleur d'arrière-plan / de police
• Incorporation de texte masqué qui s'affiche au survol
• Créer des effets de survol sur les images
• Zoom automatisé sur le texte / les images
• Modifier l'opacité de l'image
• Intégration de texte
• Échange d'image
• Div. Flotter
• Plusieurs autres opérations de mise en forme de survol CSS.

L'effet de survol modifie fondamentalement la valeur de propriété d'un élément pour permettre l'animation des modifications d'un texte / image déclaré ou d'éléments respectifs. L'intégration d'éléments de survol CSS dans une conception de page Web transforme une page Web ordinaire en une page Web interactive, robuste et hautement fonctionnelle. Ces conceptions de pages Web sont conviviales et complètes. Les pages Web conçues par survol sont plus attrayantes pour les consommateurs et attirent l'attention des clients potentiels.

Compatibilité de Hover en CSS

La fonction de survol est compatible avec tous les principaux navigateurs Web. Cependant, la mise en œuvre de cet élément sur les appareils tactiles reste une tâche difficile. Le survol dans CSS permet l'accessibilité du contenu sur les appareils qui ne prennent pas en charge les fonctions de survol. Il a été observé qu'une fonction de survol activée sur l'appareil non compatible peut rester bloquée sur l'appareil.

Par conséquent, l'affichage vital du contenu crucial est bloqué par le problème de formatage. D'une part, lorsque l'élément de survol du programme CSS contribue à un niveau élevé de personnalisation efficace des pages Web, à l'inverse, son opérabilité sur les appareils mobiles est très dormante. En capitulant devant les circonstances où le monde des technologies de l'information devient de plus en plus mobile, la fonction de survol risque de devenir obsolète avec les progrès technologiques. Par conséquent, la nécessité de fabriquer une fonction embarquée portable qui fonctionne avec les appareils tactiles et mobiles est extrêmement cruciale.

Comment fonctionne Hover en CSS?

Le style de pseudo-classe actif est dominant dans le formatage de survol CSS et il remplace tout lien suivant suivi par cette pseudo-classe. Par exemple, dans la pseudo-classe «: link: visité, ou: active, la règle: hover doit être placée après: link et: viewed mais avant: active pour le style approprié: hover. L'ordre LVHA:: link,: hover,: viewed, and: active est utilisé comme référence pour le style de formatage: hover.

div {background-color: green padding: 18px display: none} span: hover + div {display: block}Test de survol!Le code caché s'affiche au survol

Dans le code ci-dessus, l'élément span est modifié pour fusionner l'élément hover et div en utilisant l'élément span: hover + div. L'élément span qui s'affichera sur la page Web de destination principale affichera le texte 'Hover test!' Un survol supplémentaire sur l'élément span révèle l'élément div «Le code caché s'affiche au survol». Ce format d'incorporation est opérationnel sur le texte ainsi que sur les images.

Passez la couleur d'arrière-plan à 'Rouge'

p: hover, h1: hover, a: hover {background-color: Red}
Rouge planant
 
Rouge planant
 
Liens:
 
Hover Test Rouge:
  Google com  
  Remarque: Bonjour
 

Le code ci-dessus personnalise le

,

et élément et les intègre dans une fonction de survol commune. Ce code est conçu pour changer la couleur du texte en rouge lorsque le pointeur de la souris les survole. Les composants h1 et h2 affichent respectivement «CSS: Hover Test Code» et «Hover Red». L'élément de paragraphe: Hover Test Red et anchor tag: google.com sont mis en évidence en rouge lorsque le pointeur de la souris les survole.

Création d'une opacité de survol sur les images

.pic {largeur: 1900px hauteur: 1900px opacité: 1 filtre: alpha (opacity = 100) arrière-plan: url (https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280. png) no-repeat} .pic: hover {opacity: 0.2 filter: alpha (opacity = 30)}

Le programme CSS ci-dessus affiche la modification de l'opacité d'une image au survol. L'opacité d'origine de l'image est un cependant, en utilisant le filtre de survol d'opacité, le même a été modifié à 0,2. Ce code montre qu'en utilisant l'élément de survol, on peut modifier l'opacité d'une image et / ou d'un texte.

Création d'une superposition de texte sur les images

.pic {largeur: 4000px hauteur: 2170px arrière-plan: url (http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat} .text {largeur: 3400px hauteur: 2170px arrière-plan: #FFF opacity: 0} .pic: hover .text {opacity: 0.6 text-align: justify color: # 000000 font-size: 20px font-weight: 700 font-family: 'Times New Roman', Times, serif padding: 30px} Orange est une fibre fruit riche. Les anti-oxydants présents dans une orange peuvent aider à la digestion, rendre la peau éclatante et agir comme un élément anti-âge.

La superposition de texte au survol CSS est un outil efficace pour incorporer le texte descriptif de l'image dans l'image elle-même. Cet outil aide à fournir une vue d'ensemble compacte de l'image sans occuper un espace dormant dans un espace limité de conception Web. Dans ce code, l'image d'arrière-plan est incorporée avec un texte descriptif qui s'affiche lorsque le pointeur de la souris survole le texte.

Cela conclut tous les aspects importants du survol en CSS et met en évidence sa convivialité dans le développement Web. Il existe de nombreux effets spéciaux qu'il peut apporter à nos pages Web. Nous pouvons toujours essayer différentes combinaisons du sélecteur de survol avec d'autres propriétés CSS comme l'animation, les images d'arrière-plan, les hyperliens, etc. et explorer son potentiel comme nous l'avons vu dans certains de nos exemples. Enfin, le CSS est l'un des moyens les plus puissants de concevoir et de transformer des pages Web et il est donc imminent pour les développeurs Web d'acquérir cette compétence afin de créer des pages Web dynamiques.

Découvrez notre qui vient avec une formation en direct animée par un instructeur et une expérience de projet réelle. Cette formation vous permet de maîtriser les compétences nécessaires pour travailler avec les technologies Web back-end et front-end. Il comprend une formation sur le développement Web, jQuery, Angular, NodeJS, ExpressJS et MongoDB.

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires du blog «Hover in CSS» et nous vous répondrons.