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

[Invité]

Bonjour,

1- as-tu conscience que sur écran tactile *, la notion de "hover" n'a pas vraiment de sens ?

Sur écran tactile, il faut absolument "toucher" l'article pour que les 3 points apparaissent.
Ce n'est pas ergonomique, car on peut scroller l'écran SANS forcément "toucher" les articles.
Du coup, on ne voit PAS les 3 points...

2- Et rendre le code plus complexe pour obtenir des "effets gadget", au détriment de l'ergonomie, n'est pas une bonne pratique, ni une bonne idée.

Revois tes "priorités"...

3- Par contre, le "click" est tout-à-fait indiqué, et recommandé.


* Ça ne concerne pas/plus que les smartphones, puisqu'on trouve maintenant de grands écrans tactiles (15"->27" et +).

[EDIT] Sinon, si tu t'entêtes :

Code :

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

1
2
3
$('.container').on('mouseleave', '.article', function(e){
  $('.dropdown-content').removeClass('show');
});

[thirt]

Bonjour jreaux62,

encore merci pour votre aide et vos conseils.

En effet, comme d'habitude, vous avez raison.

En fait, dans un premier, je comptais m'attaquer à la version laptop plutôt que smartphone. C'est pour cette raison que je voulais essayer de faire cela de cette façon.

Merci d'avance

Bonne journée
Thierry

[thirt]

Bonjour jreaux62,

finalement, j'ai tenu compte de vos précieux conseils et je laisse afficher les 3 petits points sur l'article.

Merci d'avance

Bonne soirée
Thierry