Maison > Article > interface Web > Comment masquer le style d'affichage lorsque la souris passe par CSS
Comment masquer le style d'affichage lorsque la souris passe par CSS
- 青灯夜游original
- 2022-09-22 17:49:564710parcourir
En CSS, vous pouvez utiliser le sélecteur ":hover" et l'attribut display pour masquer le style d'affichage lorsque la souris passe dessus ; il vous suffit d'utiliser le sélecteur ":hover" pour sélectionner l'élément sur lequel le pointeur de la souris est placé. est flottant et définissez l'élément pour cet état. Le style "display:none;" est suffisant et la syntaxe est "élément spécifié:hover {display:none;}".
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, vous pouvez utiliser le sélecteur ":hover" et l'attribut d'affichage pour masquer le style d'affichage au passage de la souris.
Utilisez simplement le sélecteur ":hover" pour sélectionner l'élément sur lequel le pointeur de la souris flotte et définissez le style "display:none;" sur l'élément dans cet état pour le masquer.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 520px;
height: 50px;
background-color: #008000;
}
div:hover {
display:none;
}
</style>
</head>
<body>
<div>
hello
</div>
</body>
</html>
Description :
: sélecteur de survol
: le sélecteur de survol est utilisé pour sélectionner l'élément sur lequel flotte le pointeur de la souris.
Astuce : Le sélecteur :hover peut être utilisé sur tous les éléments, pas seulement sur les liens.
Dans la définition CSS, :hover doit être placé après :link et :visited (si présent) pour que le style prenne effet.
:le sélecteur de liens définit le style des liens pointant vers des pages non visitées, le sélecteur :visited est utilisé pour définir des liens vers les pages visitées et le sélecteur :active est utilisé pour les liens actifs.
Utilisation 1 :
Cela signifie : lorsque la souris survole le style a, la couleur d'arrière-plan de a est définie sur jaune
a:hover
{
background-color:yellow;
}C'est l'utilisation la plus courante, il suffit de changer le style via un
Utilisation 2 :
Utilisez a pour contrôler le style des autres blocs :
Utilisez a pour contrôler l'élément enfant b de a :
.a:hover .b {
background-color:blue;
}Utilisez a pour contrôler l'élément frère de a c (élément frère) :
.a:hover + .c {
color:red;
}Utilisez un contrôle l'élément d le plus proche de a :
.a:hover ~ .d {
color:pink;
}Pour résumer :
1 N'ajoutez rien au milieu pour contrôler les éléments enfants ;
2. ' Contrôler les éléments à proximité ;
ExempleUtilisez un bouton pour contrôler l'état de mouvement d'une boîte. Lorsque la souris passe sur le bouton, la boîte cesse de bouger. Lorsque la souris s'éloigne, la boîte continue de bouger.
body code :<body>
<div class="btn stop">stop</div>
<div class="animation"></div>
</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>
"display:none;" style
display:none peut masquer des éléments sans occuper d'espace, donc la modification dynamique de cet attribut entraînera un réarrangement (changement de mise en page) , vous pouvez Cela équivaut à supprimer l'élément de la page ; il ne sera pas hérité par les descendants, mais ses descendants ne seront pas affichés après tout, ils sont tous cachés ensemble.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.display{
display:none;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="display">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
(Partage de vidéos d'apprentissage : 
front-end web
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!