Jquery et CSS
IchizuKhivar
Messages postés
4
Statut
Membre
-
IchizuKhivar Messages postés 4 Statut Membre -
IchizuKhivar Messages postés 4 Statut Membre -
Bonjour,
J'ai chopper un tuto sur le net pour faire des onglets liée à des players (ex youtube ou daylimotion).
Tout fonctionne nickel mais contrairement au tuto j'aurais aimer apporter quelques modification, j'ai fait en sorte que lorsque l'on passe la sourie sur l'onglet, celui ci change de couleur mais j'aimerais que le texte change lui aussi, comme sur ce site : " http://www.myprodigy.fr/ ".
Voilà mon code :
<div id="tabs">
<ul>
<li><a href="#tab-1"><p>TV Principale</p></a></li>
<li><a href="#tab-2"><p>IchizuKhivar</p></a></li>
<li><a href="#tab-3"><p>JbyGood</p></a></li>
<li><a href="#tab-4"><p>Peter</p></a></li>
</ul>
voilà mon css :
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #DCDCDC;
line-height:15px;
}
#tabs ul li a:hover {
background-color:MediumBlue;
background:-moz-box-shadow: 0 0 7px #000080;
-webkit-box-shadow: 0 0 7px #000080;
box-shadow: 0 0 5px #000080;
}
J'espère que vous pourrez m'aider merci d'avance.
Cordialement un étudiant qui veux progresser é_è.
J'ai chopper un tuto sur le net pour faire des onglets liée à des players (ex youtube ou daylimotion).
Tout fonctionne nickel mais contrairement au tuto j'aurais aimer apporter quelques modification, j'ai fait en sorte que lorsque l'on passe la sourie sur l'onglet, celui ci change de couleur mais j'aimerais que le texte change lui aussi, comme sur ce site : " http://www.myprodigy.fr/ ".
Voilà mon code :
<div id="tabs">
<ul>
<li><a href="#tab-1"><p>TV Principale</p></a></li>
<li><a href="#tab-2"><p>IchizuKhivar</p></a></li>
<li><a href="#tab-3"><p>JbyGood</p></a></li>
<li><a href="#tab-4"><p>Peter</p></a></li>
</ul>
voilà mon css :
#tabs ul li a {
text-decoration: none;
padding: 8px;
color: #DCDCDC;
line-height:15px;
}
#tabs ul li a:hover {
background-color:MediumBlue;
background:-moz-box-shadow: 0 0 7px #000080;
-webkit-box-shadow: 0 0 7px #000080;
box-shadow: 0 0 5px #000080;
}
J'espère que vous pourrez m'aider merci d'avance.
Cordialement un étudiant qui veux progresser é_è.
A voir également:
- Jquery et CSS
- Css download - Télécharger - HTML
- Enlever soulignement lien css ✓ - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
la fonction hover() peut prendre en paramètre deux fonctions si tu regardes bien :
https://api.jquery.com/hover/
- une qui s'exécute au survol de la souris sur l'élément
- une autre qui s'exécute quand la souris ressort de l'élément
j'ai juste mis la première. pour la deuxième, en gros il faut remettre le texte initial quand on enlève la souris. donc trouver un moyen de garder en mémoire le texte initial.
donnerait ceci :
//declaration de la variable qui va garder en memoire le texte du lien var texteinitial; $("tabs>ul>li>a").hover( //1ere fonction function(){ //Le texte initial conservé dans la variable texteinitial=$(this).text(); //Remplacement du texte contenu dans l'élément par le nouveau texte $(this).text("Mon nouveau texte"); }, //2nde fonction function(){ //on remet l'ancien texte quand on enlève la souris $(this).text(texteinitial); } );pareil à tester
menu {
-moz-box-shadow: inset 10px 10px 5px 100px #656565;
-webkit-box-shadow: inset 10px 10px 5px 100px #656565;
-o-box-shadow: inset 10px 10px 5px 100px #656565;
box-shadow: inset 10px 10px 5px 100px #656565;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
}
Voilà a+