Disparition du menu quand l'article n'est plus survolé.

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

Bonjour,

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

Code:

---

1 2 3 4 5 6 7

.article .dropbtn { display:block; visibility:hidden; } .article:hover .dropbtn { visibility:visible; }

---

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

Une solution full CSS à ta problématique :

Code:

---

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:

---

1 2 3 4 5 6

.article:hover .dropbtn { background-color: #ccc; } .article .dropbtn:hover, .article .dropbtn:focus { background-color: #2980B9; }

---

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

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:

---

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

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:

---

1 2 3

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

---

:aie:

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

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