Discussion :

[thirt]

Bonjour à vous,

en fait, les 3 petits points du menu apparaissent quand on survole l'article. Une fois qu'on ne survole plus l'article, les 3 petits points disparaissent.

Dans mon cas, quand je survole l'article et que je clique sur les 3 petits points, le menu apparaît. Par contre, quand je ne survole plus l'article en question, j'aimerais que ce menu disparaisse en même temps que les 3 petits points.

Je suppose que ce n'est pas possible de faire cela en CSS et que je dois utiliser du javascript ?

Voici une copie de mon code :

https://codepen.io/thirt/pen/ZgqrBp?editors=0010

Merci d'avance

Bonne journée
Thierry

[Invité]

Bonjour,

pour éviter que "ça saute" au survol, je te conseille d'utiliser visibility:hidden/visible; plutôt que display:none/block;.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.article .dropbtn {
  display:block;
  visibility:hidden;
}
.article:hover .dropbtn {
  visibility:visible;
}

[thirt]

Bonjour jreaux62,

encore une fois, je tenais à vous remercier pour votre aide, votre disponibilité et vos conseils.

C'est vrai que c'est nettement mieux d'utiliser visibility:hidden/visible à la place de display:none/block dans ce cas-ci.

Je vais donc ajouter une classe en javascript qui va me permettre de cacher le menu quand on ne survole plus l'article.

Bonne journée à vous,
Thierry

[Invité]

Une solution full CSS à ta problématique :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.article .show { display:block; }
.article:not(:hover) .show {
  display:none; 
}

CONSEIL : à ta place, je laisserais les 3 points TOUJOURS visibles *.
Ergonomiquement, c'est mieux (surtout sur écran tactile).
Inutile de jouer à cache-cache...

* Par contre, peut-être jouer sur le fond de couleur sur le :hover (sur l'article) ?

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.article:hover .dropbtn {
    background-color: #ccc;
}
.article .dropbtn:hover, .article .dropbtn:focus {
    background-color: #2980B9;
}

[thirt]

Bonjour jreaux62,

encore une fois, merci beaucoup pour ton aide et tes conseils qui sont toujours aussi précieux. -

Je vais y regarder et tenir compte de tes conseils.

Bon dimanche.
Thierry

[thirt]

Bonjour jreaux62,

encore une fois, merci pour votre aide et vos conseils.

Finalement, j'ai changé d'avis. En fait, j'aimerais que les 3 petits points restent affichés si le menu est affiché et qu'on ne survole plus l'article. Par contre, si le menu n'est pas affiché, j'aimerais que les 3 petits points disparaissent si l'article n'est plus survolé.

En fait, je me demande s'il y a moyen de faire cela uniquement en CSS. SI on ne survole plus l'article .article:not(:hover) et que le menu est toujours montré à l'écran (si la classe show existe, cela signifie que le menu est toujours montré à l'écran) alors, à ce moment-là, je dis que les 3 petits points doivent rester affichés.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.article:not(:hover) .show {
  visibility: visible; 
}

Malheureusement, les 3 petits points disparaissent quand je ne survole plus l'article malgré le fait que le menu est toujours affiché.

Dois-je faire cela automatiquement en javascript ?

Voici une version de mon code pour que vous puissiez voir ce que ça donne actuellement :

https://codepen.io/thirt/pen/wVbdbp?editors=0010

Merci d'avance

Bonne fin de journée
Thierry