Sujet Précédent Sujet Suivant

Faire apparaître du texte durant un :hover

Résolu/Fermé
Utilisateur anonyme - 3 oct. 2017 à 20:51
 Utilisateur anonyme - 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.


3 réponses

Réponse 1 / 3
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
3 oct. 2017 à 23:14
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");
});
1
Utilisateur anonyme
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.
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > Utilisateur anonyme
3 oct. 2017 à 23:54
https://www.alsacreations.com/astuce/lire/80-comment-intgrer-du-code-javascript-dans-une-page.html
0
Utilisateur anonyme
Modifié le 4 oct. 2017 à 10:07
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
0
Réponse 2 / 3
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
3 oct. 2017 à 21:55
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.
0
Utilisateur anonyme
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
0
Réponse 3 / 3
Utilisateur anonyme
3 oct. 2017 à 22:21
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;
}
0
Utilisateur anonyme
3 oct. 2017 à 22:23
comme tu peut le voir j'ai testé de le faire en css avec mes class .hiddentext et .linklist
mais sans y parvenir évidement.

merci de ton aide
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > Utilisateur anonyme
3 oct. 2017 à 22:35
Tu as unr seule zone de texte poir 8 boutons ?
0
Utilisateur anonyme > jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024
3 oct. 2017 à 22:37
non c’était juste un test, j'ai 8 autre texte mais qui ce situe tous au même endroit
0
Utilisateur anonyme
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 ....
0
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717 > Utilisateur anonyme
3 oct. 2017 à 22:54
Si... mais tu dois mettre des ID ou qqchose qui permette d'identifier CHAQUE texte....
0

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
Bibliothèque
cosjac85 -
renard bleu -

3 réponses
adele
marine carnet-pantier -
irongege -

2 réponses