Masquage/Apparition d'un menu de boutons au passage de la souris [Résolu]

Signaler
Messages postés
10
Date d'inscription
jeudi 4 juin 2020
Statut
Membre
Dernière intervention
12 juillet 2020
-
Messages postés
10
Date d'inscription
jeudi 4 juin 2020
Statut
Membre
Dernière intervention
12 juillet 2020
-
Bonjour, Je souhaite faire apparaitre un menu de boutons au passage de la souris. J'arrive bien à faire le masquage avec un display:none mais impossible de faire réapparaitre le bouton au passage de la souris.
Code HTML :
  <div class="cadre">
         <h4>Menu</h4> 
                 <ul>
                 <form action="page.php" method="POST"  >
                 <input  type="hidden" name="choix_accueil" value="valeur_a_envoyer">
                 <input type="submit" name="Valider" value="Nom_bouton" class="bouton">
                 </form> 
                 </ul>
  </div> 


CSS :
.element_menu ul 
{
    display:none;
 }

.element_menu ul:hover
{
    display:block;
 }



Merci.

3 réponses

Messages postés
29570
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 septembre 2020
2 785
Bonjour
je suppose que ton UL étant déjà masquer le hover ne s'applique pas dessus mais sur son parent.

Messages postés
10
Date d'inscription
jeudi 4 juin 2020
Statut
Membre
Dernière intervention
12 juillet 2020
1
Probablement.

J'ai essayé plusieurs choses du genre :
.element_menu h4:hover > .element_menu ul:hover
{
   display:block;
 }



Mais sans succès...
Messages postés
29570
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 septembre 2020
2 785
Avec un sélecteur de voisin ça fonctionnera certainement mieux car c'est lecteur de fils.
Un truc du genre

.element_menu>h4:hover + ul {
Messages postés
29570
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 septembre 2020
2 785 >
Messages postés
29570
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 septembre 2020

mais tu risques de rencontrer des soucis pour conserver le menu apparent lorsque tu vas essayer de te déplacer vers ton bouton.
La meilleur solution (à ma connaissance) reste, pour ça, l'utilisation du Javascript.
Messages postés
10
Date d'inscription
jeudi 4 juin 2020
Statut
Membre
Dernière intervention
12 juillet 2020
1
Voici une solution sans JS :

HTML:

<div class="cadre">
<div class="over">
<h4>Menu1</h4>
<form action="page.php" method="POST">
<input type="hidden" name="choix_accueil" value="valeur_a_envoyer1">
<input type="submit" name="Valider" value="Nom_bouton" class="bouton">
</form>
<form action="page.php" method="POST">
<input type="hidden" name="choix_accueil" value="valeur_a_envoyer2">
<input type="submit" name="Valider" value="Nom_bouton" class="bouton">
</form>
</div>
<div class="over">
<h4>Menu2</h4>
<form action="page.php" method="POST">
<input type="hidden" name="choix_accueil" value="valeur_a_envoyer3">
<input type="submit" name="Valider" value="Nom_bouton" class="bouton">
</form>
</div>
</div>

Css:

.over form {
display: none;
}
.over:hover form {
display: block;
}