Masquage/Apparition d'un menu de boutons au passage de la souris

Résolu/Fermé

SM05 Messages postés 10 Date d'inscription jeudi 4 juin 2020 Statut Membre Dernière intervention 12 juillet 2020 - 5 juil. 2020 à 16:33
SM05 Messages postés 10 Date d'inscription jeudi 4 juin 2020 Statut Membre Dernière intervention 12 juillet 2020 - 12 juil. 2020 à 18:03

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.

A voir également:

Masquage/Apparition d'un menu de boutons au passage de la souris
Menu déroulant excel - Guide
Quelle touche pour débloquer la souris ? - Guide
Menu démarrer windows 11 - Guide
Passage qwerty azerty - Guide
Canon quick menu - Télécharger - Utilitaires

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
5 juil. 2020 à 17:32

Bonjour
je suppose que ton UL étant déjà masquer le hover ne s'applique pas dessus mais sur son parent.

Réponse 2 / 3

SM05 Messages postés 10 Date d'inscription jeudi 4 juin 2020 Statut Membre Dernière intervention 12 juillet 2020 1
5 juil. 2020 à 18:17

Probablement.

J'ai essayé plusieurs choses du genre :

.element_menu h4:hover > .element_menu ul:hover
{
   display:block;
 }

Mais sans succès...

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652
Modifié le 5 juil. 2020 à 19:46

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 {

jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024 4 652 > jordane45 Messages postés 38151 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 mai 2024
5 juil. 2020 à 20:28

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.

Réponse 3 / 3

SM05 Messages postés 10 Date d'inscription jeudi 4 juin 2020 Statut Membre Dernière intervention 12 juillet 2020 1
12 juil. 2020 à 18:03

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;
}

Discussions similaires

Problème Chronopost : Pas d'avis de passage !!

les entrées et les sortées

la souris ne bouge plus sur mon pc portable

Comment changer le sens de la souris avec un double écran ?

Discussions similaires

Newsletters