Transition en CSS (visibility)

Version imprimable

J'ai un problème, et je n'ai toujours pas trouvé la solution après la consultation des nombreux forums, tutos et cours.

J'ai un lien, et lorsque que je passe ma souris sur ce lien, une infobulle devient visible. Et j'aimerai effectuer une transition pour faire apparaître l'infobulle 0.4s après que ma souris soit allé sur le lien, et je veux que l'infobulle disparaisse instantanément après que ma souris soit en dehors du lien (vous m'avez compris, je ne sais pas trop comment expliqué.

Problème, bah jsp comment on fait et je n'ai pas trouvé le moyen de le faire donc je viens demander votre aide (je demande de l'aide seulement sur cela et pas besoin de me dire que y'a des choses qui servent à rien et qui sont pas opti :roll:)

partie de mon code css concernée :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .menu a p { color: black; font-size: 10px; text-align: justify; background-color: #A3C6D1; display: block; border-radius: 10px; padding: 5px; width: 170px; position: absolute; visibility: hidden; border: 5px solid #6692A1; transition-property: visibility; transition-delay: 0.4s; } .menu a:hover p { visibility: visible; }
Avec le code ci-dessus, quand ma souris passe sur le lien, l'infobulle apparait après 0.4s, mais lorsque je décale ma souris du lien, l'infobulle met encore 0.4s à disparaitre, et moi je veux qu'elle disparaisse immédiatement !

Prenez en compte seulement les "transition-property" et "transition-delay" la parti tout en bas, enfin seuls les élements en rapport avec la discussion

Bonjour,
il te faut jouer sur les propriétés transition-delay et transition-duration et en modifier leur valeur suivant l'état « hover or not ».

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
.info {
  opacity: 0;
  transition-delay: 0s;              /* délai pour départ de l'effet */
  transition-duration: 0s;           /* durée de l'effet */
  transition-property: opacity;      /* propriété prise en compte */
}
 
conteneur:hover .info {
  opacity: 1;
  transition-delay: .4s;             /* délai pour départ de l'effet */
  transition-duration: .5s;          /* durée de l'effet */
  transition-property: opacity;      /* propriété prise en compte */
}

30/01/2020, 17h25
Lucas Gauthier

merci beaucoup !

En faite, à cause de l'opacité, l'infobulle est seulement transparente mais présente, donc cela pause un problème. Vous ne savez pas comment effectuer cela avec visibility ?

Bonjour,

un effet sympa :

Code:

1
2
3
4
5
6
7
8
9
10
11
.menu a p {
  position: absolute;
  visibility: hidden;
  transform:scale(0);
  transition: all 0.3s 0.4s;
}
 
.menu a:hover p {
  visibility: visible;
  transform:scale(1);
}

03/02/2020, 10h16
Invité

Merci

Ce n'est pas exactement ce qui était demandé puisque l'info bulle ne disparait pas instantanément après que le curseur ait était retiré du bouton, mais ça nous suffit amplement et rajoute une petit truc a notre site.

Citation:

Envoyé par Lucas Gauthier

En faite, à cause de l'opacité, l'infobulle est seulement transparente mais présente, donc cela pause un problème. Vous ne savez pas comment effectuer cela avec visibility ?

Ce n'est quand même pas bien dur de changer une propriété par une autre me semble-t-il !

En complément :
Les éléments en visibility:hidden ne reçoivent effectivement pas les événements contrairement aux éléments en opacity:0, mais cela peut être compensé en ajoutant la déclaration pointer-events:none sur ceux-ci en plus de l'opacité.
Code:

1 2 3 4 5 6 7 .info { opacity: 0; pointer-events: none; transition-delay: 0s; /* délai pour départ de l'effet */ transition-duration: 0s; /* durée de l'effet */ transition-property: opacity; /* propriété prise en compte */ }

09/02/2020, 22h06
Invité

Non

Ta solution ne règle pas le probleme on ne peut plus cliquer sur les boutons présent sous l'info bull invisible.

Citation:

Envoyé par ElectriqueFurious

Ta solution ne règle pas le probleme

c'est un peu léger comme retour !

Quel environnement te permet de déclarer cela, IE inférieur à 11 ?

Un exemple non fonctionnel aurait été apprécié, ceci étant je te fournie un exemple parfaitement fonctionnel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opacity & pointer-events</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2042907">
<style>
a,
.conteneur {
  position: relative;
}
button {
  font: inherit;
  cursor: pointer;
  line-height: 2;
}
.info-bulle {
  position: absolute;
  top: 100%;
  left: 0;
  width: 10em;
  padding: .5em;
  border: 1px solid #069;
  color: #000;
  opacity: .1;
  background: #DEF;
 
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;              /* délai pour départ de l'effet */
  transition-duration: 0s;           /* durée de l'effet */
  transition-property: opacity;      /* propriété prise en compte */
}
.conteneur a:hover .info-bulle {
  opacity: 1;
  pointer-events: auto;              /* restaure pointer-events si besoin */
  transition-delay: .4s;             /* délai pour départ de l'effet */
  transition-duration: .5s;          /* durée de l'effet */
  transition-property: opacity;      /* propriété prise en compte */
}
</style>
</head>
<body>
<div class="conteneur">
  <p>
    <a href="#">Lien au survol
      <span class="info-bulle">L'info bulle à faire apparaître et qui recouvre le bouton qui suit !</span>
    </a>
  </p>
  <p><button onclick="alert('Yes !!')">Un bouton à cliquer</button>
</div>
</body>
</html>