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:

Jquery et CSS
Enlever couleur lien css ✓ - Forum CSS
Css exposant ✓ - Forum CSS
Css download - Télécharger - HTML
Mettre une image à gauche css ✓ - Forum CSS
Déplacer une image css - Forum CSS

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

[CSS] Forcé retour à la ligne

trait horizontal avec du css

HTML - définir taille bouton

[CSS] Mettre un objet au premier plan

Enlever le soulignement sous les liens en HTML/CSS

Discussions similaires

Newsletters