Jquery et CSS

Fermé

IchizuKhivar Messages postés 4 Date d'inscription mardi 4 mars 2014 Statut Membre Dernière intervention 9 avril 2014 - 4 mars 2014 à 23:10
IchizuKhivar Messages postés 4 Date d'inscription mardi 4 mars 2014 Statut Membre Dernière intervention 9 avril 2014 - 9 avril 2014 à 19:57

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">TV Principale</a></li>
<li><a href="#tab-2">IchizuKhivar</a></li>
<li><a href="#tab-3">JbyGood</a></li>
<li><a href="#tab-4">Peter</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:

1 réponse

Réponse 1 / 1

totodunet Messages postés 1377 Date d'inscription mercredi 18 mars 2009 Statut Membre Dernière intervention 5 mars 2020 199
4 mars 2014 à 23:15

salut

tu l'as dit dans le titre, faut employer le JS

avec jQuery ça donnerai ça :

$("#tabs>ul>li>a").hover(function(){
      $(this).text("Mon texte");
}
);

sous reserve que ça marche car pas test

IchizuKhivar Messages postés 4 Date d'inscription mardi 4 mars 2014 Statut Membre Dernière intervention 9 avril 2014 2
4 mars 2014 à 23:22

Hum soit je sais pas m'en servir soit ça ne fonctionne pas xD merci de ton aide en tout cas et de ta rapidité j'apprécie.

totodunet Messages postés 1377 Date d'inscription mercredi 18 mars 2009 Statut Membre Dernière intervention 5 mars 2020 199
Modifié par totodunet le 5/03/2014 à 19:29

non c'est moi qui me suis trompé
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

IchizuKhivar Messages postés 4 Date d'inscription mardi 4 mars 2014 Statut Membre Dernière intervention 9 avril 2014 2
9 avril 2014 à 19:57

j'ai trouvé plus simple suffit de mettre dans le css un inset avec la shadow box exemple :

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+

Discussions similaires

trait horizontal avec du css

Enlever le soulignement sous les liens en HTML/CSS

HTML - définir taille bouton

[CSS] Forcé retour à la ligne

indice et exposant en css ?