Signaler

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

Posez votre question astrocurieux 176Messages postés mardi 24 février 2015Date d'inscription 19 octobre 2017 Dernière intervention - Dernière réponse le 4 oct. 2017 à 09:58 par astrocurieux
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.


Utile
+0
plus moins
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 176Messages postés mardi 24 février 2015Date d'inscription 19 octobre 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
Répondre
Donnez votre avis
Utile
+0
plus moins
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 176Messages postés mardi 24 février 2015Date d'inscription 19 octobre 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 ....
Répondre
jordane45 18474Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 23 octobre 2017 Dernière intervention - 3 oct. 2017 à 22:54
Si... mais tu dois mettre des ID ou qqchose qui permette d'identifier CHAQUE texte....
Répondre
astrocurieux 176Messages postés mardi 24 février 2015Date d'inscription 19 octobre 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>
Répondre
jordane45 18474Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 23 octobre 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)
Répondre
astrocurieux 176Messages postés mardi 24 février 2015Date d'inscription 19 octobre 2017 Dernière intervention - 3 oct. 2017 à 23:09
je viens de mettre a jour le dernier post du code
Répondre
Donnez votre avis
Utile
+0
plus moins
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 176Messages postés mardi 24 février 2015Date d'inscription 19 octobre 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.
Répondre
jordane45 18474Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 23 octobre 2017 Dernière intervention - 3 oct. 2017 à 23:54
https://www.alsacreations.com/astuce/lire/80-comment-intgrer-du-code-javascript-dans-une-page.html
Répondre
astrocurieux 176Messages postés mardi 24 février 2015Date d'inscription 19 octobre 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
Répondre
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 !