la règle jquery .css() n'est pas appliquée

Question

J'ai ce code, tout fonctionne bien mais .css('color','red') J'ai essayé différentes méthodes mais je n'en ai trouvé aucune.

$('#menu li').each(function() {
$(this).hover(function() {
$(this).text().charAt(0).css('color','red');
});
});

Je ne peux pas comprendre ce qui ne va pas avec le code ci-dessus.

$('#menu li').each(function() {
$(this).hover(function() {
$(this).css('color','red');
});
});

Merci pour vos réponses.

Answer 1

charAt renvoie juste une chaîne de caractères, pas un objet DOM, donc vous ne pouvez pas utiliser css avec elle. L'une des options consiste à utiliser la fonction CSS3 first-letter en CSS ordinaire :

#menu li:hover:first-letter {
    color: red;
}

Une autre solution (bien que plus maladroite, plus lente et moins flexible) consiste à envelopper le premier caractère de chaque fichier #menu li dans un span et le style, mais je vous le déconseille.

Answer 2

$(this).text().charAt(0) est une chaîne javascript. Elle n'a pas de méthode .css() .

Vous ne pouvez donc pas appliquer une CSS à un seul caractère dans une chaîne javascript.

Si vous voulez appliquer une couleur à un caractère de la page, vous devrez récupérer le texte, ajouter une balise span autour du premier caractère, lui ajouter un style, puis remettre ce HTML sur l'élément DOM.

Je vous suggère de modifier votre code comme suit :

$('#menu li').hover(function() {
    var text = $(this).text();
    text = "<span style='color: red'>" + text.charAt(0) + "</span>" + text.slice(1);
    $(this).html(text);
  }, 
  function() {
    $(this).html($(this).text());
});

Vous pouvez le voir en action ici : http://jsfiddle.net/jfriend00/9xCak/

Je ne recommanderais pas l'utilisation de ce jQuery car il existe de bien meilleures façons de procéder. Il est possible de le faire avec du CSS pur ou d'ajouter/supprimer une classe avec votre jQuery.

Notez que vous n'avez pas besoin de l'option each car il suffit de définir un gestionnaire de survol sur le premier sélecteur jQuery pour qu'il exécute un survol pour tous les éléments correspondants du sélecteur. En outre, vous avez une deuxième fonction dans l'appel de survol pour le remettre en place lorsque la souris quitte

Si vous souhaitez que le rouge disparaisse lorsque la souris quitte le li, vous pouvez le faire entièrement avec CSS. Aucun jQuery n'est nécessaire.

HTML :

<li><span class="firstLetter">F</span>irst Menu Item</li>

CSS :

li .firstLetter:hover {color:red;}

Answer 3

Le premier code ne fonctionne pas. Vous essayez d'appliquer une css à un caractère. Le css ne peut être appliqué qu'aux éléments html, ce qui affectera les caractères qui s'y trouvent.

Answer 4

Si vous n'avez qu'un seul mot, alors la réponse de jfriend00 est parfaite. Mais si vous voulez appliquer un style à chaque mot d'une chaîne, je vous recommande de lire ceci Changer la valeur de la première lettre de chaque mot