Maison interface Web tutoriel CSS Que faire si le survol ne fonctionne pas

Que faire si le survol ne fonctionne pas

Mar 03, 2021 am 10:40 AM
hover

La solution pour le survol ne fonctionne pas : 1. Vérifiez et supprimez l'espace avant ":hover" ; 2. Vérifiez et modifiez le nom de classe correct 3. Vérifiez si ":hover" est placé dans ":hover" ; lien" et ":visited", modifiez simplement l'emplacement.

Que faire si le survol ne fonctionne pas

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur DELL G3.

Il y a plusieurs raisons pour lesquelles le survol en CSS ne fonctionne pas :

1 Ajoutez un espace avant de définir : hover :

Par exemple,

<style type="text/css">
.one {
margin: 0 auto;
width: 400px;
height: 300px;
background: #ced05d;
}
.two {
margin: 0 auto;
width: 100px;
height: 100px;
background: #5a5aea;
}
.three {
margin: 0 auto;
width: 200px;
height: 100px;
background: #4b9c49;
}
.four {
margin: 0 auto;
width: 300px;
height: 100px;
background: #7b4141;
}
.one :hover {
background: #da56d0;
}
</style>
<body>
<h1>测试</h1>
<div class="one">
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>
Copier après la connexion

. Vous constatez que la souris Lorsque la classe est une, l'arrière-plan reste inchangé, mais la couleur d'arrière-plan des autres divs à l'intérieur d'un changement

Remarque : l'ajout d'un espace avant :hover n'aura pas l'effet de :hover lui-même. , mais les éléments descendants auront : un effet de survol.

[Apprentissage recommandé : Tutoriel vidéo CSS]

2 Lorsque la souris passe dessus, laissez les autres éléments changer de style :

Vous trouverez à cette fois, seuls les éléments descendants et les éléments frères (éléments frères immédiatement après l'élément) ont un effet, les autres :hover ne seront pas valides

3 Le nom de la classe est mal écrit

4. : hover est placé avant :link et :visited;

Dans la définition CSS, a:hover doit être placé après a:link et a:visited pour être valide.

Dans la définition CSS, a:active doit être placé après a:hover pour être valide.

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Astuce CSS : utilisez la transition pour conserver l'état de survol 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. 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 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.

Le rôle du survol en HTML 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 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.

Comment utiliser le survol en CSS Comment utiliser le survol en CSS Feb 23, 2024 pm 12:06 PM

La pseudo-classe hover en CSS est un sélecteur très couramment utilisé qui permet de changer le style d'un élément lorsque la souris le survole. Cet article présentera l'utilisation du survol et fournira des exemples de code spécifiques. 1. Utilisation de base Pour utiliser le survol, nous devons d'abord définir un style pour l'élément, puis utiliser la pseudo-classe :hover pour spécifier le style correspondant lorsque la souris survole. Par exemple, nous avons un élément bouton Lorsque la souris survole le bouton, nous voulons que la couleur d'arrière-plan du bouton passe au rouge et la couleur du texte au blanc.

Comment utiliser le survol en CSS Comment utiliser le survol en CSS Nov 24, 2023 am 10:32 AM

En CSS, :hover est un pseudo-sélecteur utilisé pour sélectionner les éléments survolés par le pointeur de la souris. Vous pouvez utiliser :hover pour appliquer certaines modifications de style lorsque l'utilisateur survole un élément.

Comment utiliser la méthode jQuery hover() Comment utiliser la méthode jQuery hover() Dec 04, 2023 am 09:56 AM

hover() est une méthode couramment utilisée dans jQuery. Elle est utilisée pour lier deux fonctions de gestion d'événements. Ces deux fonctions seront exécutées lorsque le pointeur de la souris entre et quitte l'élément correspondant. La méthode d'utilisation de base est "$(selector).hover(inFunction,outFunction);".

See all articles