Signaler

Html/css capricieux [Résolu]

Posez votre question astrocurieux 183Messages postés mardi 24 février 2015Date d'inscription 13 novembre 2017 Dernière intervention - Dernière réponse le 2 oct. 2017 à 13:07 par astrocurieux
Bonjour,

voila j'ai 5 boutons utilisant la balise href, je désire afficher deux texte différent a deux endroit différent au moment ou mon curseur survole le bouton en question.

chaque bouton a ses propre texte qui lui son dédié, mais la position reste la même.
j'utilise le framework bootstrap 4.

voici ma tentative :

  
  <a  name="redirection"></a>
  <section class="bg-light-gray bounds">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">

          <p id="txt1">blabla n°1 paragraphe 1</p>
          <p id="txt2">blabla n°2 paragraphe 1</p>
          <p id="txt3">blabla n°3 paragraphe 1</p>
          <p id="txt4">blabla n°4 paragraphe 1</p>
          <p id="txt5">blabla n°5 paragraphe 1</p>
          <p id="txt6">blabla n°6 paragraphe 1</p>

          <div class="posi">
            <nav class="menu">
              <input id="menu-button" type="checkbox" href="#" checked="checked" class="menu-button"/>

              <label for="menu-button" class="menu-button-icon">
                <span class="hamburger hamburger-bar-1"></span>
                <span class="hamburger hamburger-bar-2"></span>
                <span class="hamburger hamburger-bar-3"></span>
              </label>

              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup1"><i class="fa fa-cube"></i></a>
              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup2"><i class="fa fa-flag"></i></a>
              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup3"><i class="fa fa-heartbeat"></i></a>
              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup4"><i class="fa fa-handshake-o"></i></a>
              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup5"><i class="fa fa-wechat"></i></a>
              <a href="#" rel="nofollow noopener noreferrer" target="_blank" class="menu-item" id="popup6"><i class="fa fa-map-o"></i></a>
            </nav>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">

          <p id="txt1">blabla n°1 paragraphe 2</p>
          <p id="txt2">blabla n°2 paragraphe 2</p>
          <p id="txt3">blabla n°3 paragraphe 2</p>
          <p id="txt4">blabla n°4 paragraphe 2</p>
          <p id="txt5">blabla n°5 paragraphe 2</p>
          <p id="txt6">blabla n°6 paragraphe 2</p>

        </div>
      </div>
    </div>
  </section>


et voici les class qui lui sont associé (pour un soucis de clarté je ne vous procure que les plus concerner)


#txt1,#txt2,#tkt3,#txt4,#txt5,#txt6{
     opacity: 0;
}
#popup1:hover + #txt1{
     opacity: 1;
}
#popup2:hover + #txt2{
     opacity: 1;
}
#popup3:hover + #txt3{
     opacity: 1;
}
#popup4:hover + #txt4{
     opacity: 1;
}
#popup5:hover + #txt5{
     opacity: 1;
}
#popup6:hover + #txt6{
     opacity: 1;
}



Utile
+0
plus moins
petit UP please ....
je suis toujours bloqué a cette étape.
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !