Faire apparaître du texte durant un :hover
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
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.
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.
A voir également:
- Faire apparaître du texte durant un :hover
- Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
- Apparaitre hors ligne instagram - Guide
- Comment faire apparaître la tabulation sur word - Guide
- Comment faire apparaître le curseur sans souris - Guide
- Apparaitre hors ligne whatsapp - Guide
3 réponses
Ensuite... faudra faire du javascript (jquery)
In truc du genre
In truc du genre
$(".linklist").hover(function (){
$("#"+ $(this).data('txttodisplay')).css("display", "block");
},
function (){
$("#"+ $(this).data('txttodisplay')).css("display", "none");
});
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.
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.
code html
code css
<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;
}
j'ai jamais rien fait en js ou jquery.
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