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

astrocurieux 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 3 oct. 2017 à 20:51 - Dernière réponse : astrocurieux 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention
- 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 

15 réponses

Répondre au sujet
jordane45 19735 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 22 janvier 2018 Dernière intervention - 3 oct. 2017 à 21:55
0
Utile
1
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 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 3 oct. 2017 à 22:18
chouette merci jordane45, je te poste mon code d'ici quelque minutes. merci d’être indulgents je débute en html/css
Commenter la réponse de jordane45
astrocurieux 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 3 oct. 2017 à 22:21
0
Utile
8
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 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 3 oct. 2017 à 22:44
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 19735 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 22 janvier 2018 Dernière intervention > astrocurieux 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 3 oct. 2017 à 22:54
Si... mais tu dois mettre des ID ou qqchose qui permette d'identifier CHAQUE texte....
astrocurieux 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 3 oct. 2017 à 23:03
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 19735 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 22 janvier 2018 Dernière intervention > astrocurieux 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 3 oct. 2017 à 23:06
Maintenant dans tes boutons .. tu ajoutes un data-txttodisplay="id_a_afficher" (en mettant les id correspondants)
astrocurieux 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 3 oct. 2017 à 23:09
je viens de mettre a jour le dernier post du code
Commenter la réponse de astrocurieux
jordane45 19735 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 22 janvier 2018 Dernière intervention - 3 oct. 2017 à 23:14
0
Utile
3
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 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 3 oct. 2017 à 23:31
c'est probablement la que je vais avoir bon nombre de problème.
j'ai jamais rien fait en js ou jquery.
jordane45 19735 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 22 janvier 2018 Dernière intervention > astrocurieux 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 3 oct. 2017 à 23:54
astrocurieux 190 Messages postés mardi 24 février 2015Date d'inscription 12 décembre 2017 Dernière intervention - 4 oct. 2017 à 09:58
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
Commenter la réponse de jordane45