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;
}
Afficher la suite