interface Web
tutoriel CSS
Explication détaillée de l'utilisation du sélecteur de survol en CSS
Explication détaillée de l'utilisation du sélecteur de survol en CSS
Parfois, vous devez utiliser les deux événements de souris mouseover et mouseout, mais écrire du js est plus compliqué et vous devez ajouter des événements d'écoute, donc les problèmes qui peuvent être résolus avec CSS doivent être résolus avec CSS autant que possible. peut améliorer les performances. Permettez-moi d'en parler ci-dessous. Compréhension de :hover :
Lorsque nous apprenions des applications informatiques, le professeur nous a appris à utiliser le sélecteur :hover pour compléter le menu déroulant. Avant, nous savions seulement comment l'utiliser, mais nous ne savions pas pourquoi nous l'utilisions de cette manière. Notez maintenant comment l'utiliser
Définition et utilisation
<.>Définition : : le sélecteur de survol permet de sélectionner l'élément sur lequel flotte le pointeur de la souris. :le sélecteur de survol s'applique à tous les éléments Utilisation 1 : Cela signifie : lorsque la souris survole le style a, le réglage de la couleur d'arrière-plan d'un Pour le jaunea:hover
{
background-color:yellow;
}Utilisation 2 :
Utilisez a pour contrôler le style des autres blocs : Utilisez a pour contrôler le sous-élément b de a : .a:hover .b {
background-color:blue;
} .a:hover + .c {
color:red;
} .a:hover ~ .d {
color:pink;
}Pour résumer :
1. N'ajoutez rien au milieu pour contrôler les éléments enfants ;2. '+' contrôle les éléments frères (éléments frères) ;
Exemple
Utiliser un bouton pour contrôler l'état de mouvement d'une boîte Lorsque la souris passe sur le bouton, la boîte s'arrête. Lorsque la souris s'éloigne, la boîte continue. pour bouger
code corps : <body>
<p class="btn stop">stop</p>
<p class="animation"></p>
</body>style css :
<style>
.animation {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: move 2s infinite alternate;
-webkit-animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translate(-100px, 0);
}
100% {
transform: translate(100px, 0);
}
}
.btn {
padding: 20px 50px;
background-color: pink;
color: white;
display: inline-block;
}
.stop:hover ~ .animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style>Obtenir l'effet :
Recommandations associées : 
Couleur de l'animation de survol en CSS3 Comment utiliser l'animation
Exemple d'utilisation de la pseudo-classe de survol en CSS
Exemple de code de comment implémenter l'effet dynamique de survol en CSS
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Astuce CSS : utilisez la transition pour conserver l'état de survol
Sep 27, 2022 pm 02:01 PM
Comment préserver l’état de survol ? L'article suivant vous expliquera comment conserver l'état de survol sans utiliser JavaScript. J'espère qu'il vous sera utile !
L'expérience vole. Prenez un vol avec la caméra Haval X1.
Jan 15, 2024 pm 02:21 PM
Nous pouvons souvent voir de superbes vidéos vues de haut en bas sur Internet. Les photos prises par les drones sont en effet assez choquantes. Cependant, en fait, de nombreuses personnes ont une connaissance limitée des drones, par exemple, pourquoi peuvent-ils encore voler dans certains endroits. où le vol est restreint ? En fait, les « drones » prêts à voler sont actuellement le courant dominant, et ils méritent davantage le choix de la plupart des gens. Aujourd'hui, je vais vous faire vivre une expérience pratique avec la Harvest Flying Camera X1. En termes d'apparence, la Harvest Flying Camera X1 a le premier design pliable. L'ensemble de l'appareil photo ne pèse que 125 g, ce qui est plus léger qu'un téléphone portable. Il peut être facilement tenu après pliage et peut être mis dans un sac sans aucune pression. Quatre feuilles teintes en douceur et un cadre de sécurité protègent parfaitement la sécurité du tir. Dyed Leaf utilise de manière innovante un substrat biologique biosourcé, hautement élastique, durable, sûr et respectueux de l'environnement. Il dispose également d'un cadre entièrement protecteur pour protéger vos mains pendant le décollage et l'atterrissage.
Comment supprimer l'événement de survol en CSS
Feb 01, 2023 am 10:06 AM
Méthodes pour supprimer les événements de survol CSS : 1. Via "$("a").hover(function(){ alert('mouseover'); }, function(){ alert('mouseout'); })" pour lier l'événement de survol ; 2. Dissociez l'événement de survol via la méthode "$('a').off('mouseenter').unbind('mouseleave');". Peut.
Quel est l'identifiant du sélecteur d'identifiant en CSS
Sep 22, 2022 pm 03:57 PM
En CSS, l'identifiant du sélecteur d'identifiant est "#". Vous pouvez spécifier un style spécifique pour l'élément HTML marqué avec une valeur d'attribut d'identifiant spécifique. La structure syntaxique est "#ID value {attribut: valeur d'attribut;}". L'attribut ID est unique et non répétable dans toute la page ; la valeur de l'attribut ID ne doit pas commencer par un numéro. Les identifiants commençant par des chiffres ne fonctionneront pas dans les navigateurs Mozilla/Firefox.
Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3
Nov 20, 2023 am 11:20 AM
Utilisez le sélecteur de pseudo-classe :nth-child(n+3) pour sélectionner le style des éléments enfants dont la position est supérieure ou égale à 3. L'exemple de code spécifique est le suivant : Code HTML : <divid="container" ><divclass="item"> ;Premier élément enfant</div><divclass="item"&
analyse du sélecteur de pseudo-classe d'apprentissage du pseudo-sélecteur css
Aug 03, 2022 am 11:26 AM
Dans l'article précédent "Apprentissage des pseudo-sélecteurs CSS : analyse des sélecteurs de pseudo-éléments", nous avons découvert les sélecteurs de pseudo-éléments, et aujourd'hui, nous examinons de plus près les sélecteurs de pseudo-classes, j'espère que cela sera utile à tout le monde !
Le rôle du survol en HTML
Feb 20, 2024 am 08:58 AM
Le rôle du survol en HTML et exemples de code spécifiques Dans le développement Web, le survol signifie que lorsque l'utilisateur passe le curseur sur un élément, certaines actions ou effets sont déclenchés. Il est implémenté via la pseudo-classe CSS :hover. Dans cet article, nous présenterons le rôle du survol et des exemples de code spécifiques. Premièrement, le survol permet à un élément de changer de style lorsque l'utilisateur le survole. Par exemple, lorsque vous passez la souris sur un bouton, vous pouvez modifier la couleur d'arrière-plan ou la couleur du texte du bouton pour rappeler à l'utilisateur la marche à suivre.
Pourquoi le survol est un pseudo-élément
Oct 09, 2023 pm 05:45 PM
Hover n'est pas un pseudo-élément, c'est une pseudo-classe. Les pseudo-classes sont utilisées pour sélectionner un état ou un comportement spécifique d'un élément, tandis que les pseudo-éléments sont utilisés pour ajouter des styles à des parties spécifiques d'un élément. Parce que :hover est utilisé pour sélectionner un état spécifique d'un élément plutôt que d'ajouter des styles à une partie spécifique de l'élément, vous pouvez utiliser la pseudo-classe :hover pour styliser l'état de survol d'un élément, et vous pouvez utiliser le :hover pseudo-classe pour ajouter des effets de survol aux liens. La couleur du lien, la couleur d'arrière-plan, etc. peuvent changer lorsque la souris le survole.
