Menu

Faire apparaître du texte durant un :hover [Résolu/Fermé]

Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
- - Dernière réponse : astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
- 4 oct. 2017 à 09:58
Bonjour,

je cherche un script js qui me permettrais d'afficher des textes a un endroit précis sur ma page quand mon curseur survole le boutons concerner a un autre endroit de cette même page.

pas moyen de le faire avec le css / :hover, comme on me l'indique partout sur internet.
car mon texte est implémenter et doit apparaître avant l’élément qui le fait apparaître.

pour être plus précis j'utilise bootstrap et j'ai découper ma page en deux colonnes de 6.
la première colonne contient mon texte qui devra apparaître, la colonne de droite une liste de mot clef pour déclenché les texte qui leur sont associé quand mon curseurs les survoles.

pouvez vous me donner un gros coup de pouce face a ce problème ?
merci de prendre du temps pour me venir en aide.


Afficher la suite 

3 réponses

Messages postés
25821
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juin 2019
1666
0
Merci
Bonjour
Avec du jquery.. Sans problème
.. mais...sans voir ton code... difficile de t'en dire plus .

Nb: n'oublie pas de mettre des id et/ou des classes pour identifier les textes à afficher. (Quelque chose pour les identifier...)
Identifiants que tu pourra reporter dans des data attributs sur tes boutons.
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
chouette merci jordane45, je te poste mon code d'ici quelque minutes. merci d’être indulgents je débute en html/css
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2
0
Merci
code html
  <a  name="hobbies"></a>
  <section class="Display_six bg-light-gray bounds">
    <div class="container-fluid">
      <video controls muted autoplay="" loop="" id="bgvid" poster="img/CRS/poster.jpg">
        <source type="video/webm" src="video/bcg.webm"></source><source type="video/mp4" src="video/bcg.mp4"></source>
      </video>
      <div class="row">
        <div class="col-lg-6">
          <p class="txt hiddentext">
            text text text text text text text text text text text text text text text text <br>
            text text text text text text text text text text text text text text text text<br>
            text text text text text text text text</p>
          </div>
        <div class="col-lg-6">
          <div class="overlay">
            <h2>My interests </h2>
            <p>
              <a class="txt linklist" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Artificial Inteligence</a><br>
              <a class="txt linklist" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Neural network</a><br>
              <a class="txt linklist" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Cryptographye</a><br>
              <a class="txt linklist" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">NeuroScience</a><br>
              <a class="txt linklist" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Cybersecurity</a><br>
              <a class="txt linklist" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Astronomie</a><br>
              <a class="txt linklist" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Aerospatial</a><br>
              <a class="txt linklist" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Psychology</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>


code css

.Display_six {
  color: black;
  background-size: cover;
  height: 100%;
}

video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
}

.overlay {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: rgba(0,0,0,0.3);
  display: block;
  margin-top: 30%;
  margin-left: 20%;
}

.overlay:hover {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: rgba(0,0,0,0.8);
  display: block;
  margin-top: 30%;
  margin-left: 20%;
}

.overlay h2 {
  text-align: center;
  padding-top: 100px;
  color: #fff;
  font-family: inherit;
}

.overlay p{
  text-align: center;
  width: 80%;
  margin: 0 auto;
  color: #fff;
  font-family: inherit;
  margin-bottom: 20px;
}

.overlay a {
  color: #fff;
}

.orange {
  text-decoration: none;
}
 p a.orange {
   color: #f27950;
 }

.hiddentext {
  margin-top: 45%;
  display: none;
}

.linklist:hover .hiddentext{
  color: yellow;
  display: block;
}
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
chaque bouton a son texte associé, et a chaque fois que je quitte un bouton avec ma souris le texte disparaît. enfin c'est comme ça que je désire le truc je sait pas si c'est faisable ....
jordane45
Messages postés
25821
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juin 2019
1666 > astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
-
Si... mais tu dois mettre des ID ou qqchose qui permette d'identifier CHAQUE texte....
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
voici le code avec les quelques modification :

<a  name="hobbies"></a>
  <section class="Display_six bg-light-gray bounds">
    <div class="container-fluid">
      <video controls muted autoplay="" loop="" id="bgvid" poster="img/CRS/poster.jpg">
        <source type="video/webm" src="video/bcg.webm"></source><source type="video/mp4" src="video/bcg.mp4"></source>
      </video>
      <div class="row">
        <div class="col-lg-6">
          <p class="txt hiddentext" id="txt1">
            text text text text text text text text text text text text text text text text
          </p>
          <p class="txt hiddentext" id="txt2">
            text text text text text text text text text text text text text text text text
          </p>
          <p class="txt hiddentext" id="txt3">
            text text text text text text text text text text text text text text text text
          </p>
          <p class="txt hiddentext" id="txt4">
            text text text text text text text text text text text text text text text text
          </p>
          <p class="txt hiddentext" id="txt5">
            text text text text text text text text text text text text text text text text
          </p>
          <p class="txt hiddentext" id="txt6">
            text text text text text text text text text text text text text text text text
          </p>
          <p class="txt hiddentext" id="txt7">
            text text text text text text text text text text text text text text text text
          </p>
          <p class="txt hiddentext" id="txt8">
            text text text text text text text text text text text text text text text text
          </p>
        </div>
        <div class="col-lg-6">
          <div class="overlay">
            <h2>My interests </h2>
            <p>
              <a class="txt linklist" data-txttodisplay="txt1" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Artificial Inteligence</a><br>
              <a class="txt linklist" data-txttodisplay="txt2" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Neural network</a><br>
              <a class="txt linklist" data-txttodisplay="txt3" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Cryptographye</a><br>
              <a class="txt linklist" data-txttodisplay="txt4" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">NeuroScience</a><br>
              <a class="txt linklist" data-txttodisplay="txt5" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Cybersecurity</a><br>
              <a class="txt linklist" data-txttodisplay="txt6" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Astronomie</a><br>
              <a class="txt linklist" data-txttodisplay="txt7" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Aerospatial</a><br>
              <a class="txt linklist" data-txttodisplay="txt8" href="#hobbies" rel="nofollow noopener noreferrer" target="_blank">Psychology</a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
jordane45
Messages postés
25821
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juin 2019
1666 > astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
-
Maintenant dans tes boutons .. tu ajoutes un data-txttodisplay="id_a_afficher" (en mettant les id correspondants)
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
je viens de mettre a jour le dernier post du code
Messages postés
25821
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juin 2019
1666
0
Merci
Ensuite... faudra faire du javascript (jquery)
In truc du genre

$(".linklist").hover(function (){
   $("#"+ $(this).data('txttodisplay')).css("display", "block");
},
function (){
   $("#"+ $(this).data('txttodisplay')).css("display", "none");
});
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
c'est probablement la que je vais avoir bon nombre de problème.
j'ai jamais rien fait en js ou jquery.
jordane45
Messages postés
25821
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juin 2019
1666 > astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
-
astrocurieux
Messages postés
285
Date d'inscription
mardi 24 février 2015
Statut
Membre
Dernière intervention
5 mai 2019
2 -
je viens de faire le test ce matin,

qu'elle joie de voir que cela fonctionne exactement comme je le voulais du premier coup ! un très grand merci a toi Jordan45 pour ta patiente et ton aide !
je passe en resolut