CSS Pseudo-classes avec jQuery

J'ai juste appris un peu de jQuery, et j'essaie de l'utiliser pour un simple changement de couleur de l'effet. Disons que j'ai deux <div>s, #foo et #bar. #foo a beaucoup d'URLs, et a le code CSS suivant est défini:

#foo a {color: blue; border-bottom: 1px dashed blue}
#foo a:hover {color: black; border-bottom: 1px solid black}

maintenant, je voudrais changer la couleur des liens (a:link) #foo lorsque l'utilisateur clique sur #bar, mais garder le a:hover couleur intacte, alors j'écris ma fonction comme ceci:

//...
$("#bar").click(function () {
  $("#foo a").css("color", "red");
});
//...

Le problème est que, bien que cette fonction ne changera tous les liens en rouge, le a:hover couleur est perdue, c'est à dire lorsqu'un utilisateur déplace le curseur de la souris sur les liens, ils vont rester rouge, noircit pas comme je l'espérais.

Depuis que je vois ce que jQuery n'est mis de style en ligne pour <a>s dans #foo, en fait <a style="color:red;" href="...">, je suppose que cela va écraser les :hover pseudo-classe. Comme le style en ligne attr pour les pseudo-classe n'a pas été mis en œuvre par une personne autant que je sache, je doute si je peux obtenir mon effet destiné à tous les...

encore, est-il une des solutions qui ne nécessitent pas de m'écrire quelque chose comme

$("#foo a").hover(
    function(){ $(this).css("color", "black");},
    function(){ $(this).css("color", "blue");}
)

?

grâce.

Cette question devrait vraiment méritent une meilleure réponse que le titre et a accepté de répondre, ne correspondent pas.

OriginalL'auteur Metaphox | 2009-01-28

  1. 3

    !important semble propriété css plus fort que de style en ligne, au moins dans Firefox. Essayez de changer vos styles à quelque chose comme ceci:

    #foo a:hover { color: black !important; }
    Génial, il fonctionne pour IE7 et Chrome. n'ont pas FF installé mais je pense que cela fonctionnera pour les FF comme vous l'avez dit. Merci beaucoup.

    OriginalL'auteur che

  2. 6

    Extrait de Réglage CSS Pseudo-Règles de Classe à Partir de Javascript

    Vous pouvez modifier la valeur d'une classe sur le vol stationnaire ou avec :après ou quelle que soit la pseudo-classe que vous voulez avec javascript:

    $(document).ready(function()
{
    var left = (($('.selected').width() - 7) / 2) + 'px';
    document.styleSheets[1].insertRule('.selected:after { left: ' + left + '; }', 0);
    document.styleSheets[0].cssRules[0].style.left = left;
});

    J'espère que cela aide quelqu'un.

    oui, ça aide. merci beaucoup!

    OriginalL'auteur David Diez

  3. 2

    Autant que je sache, jQuery ne pouvez pas définir de pseudo-classes. Cependant, il y a une autre façon:

    http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

    OriginalL'auteur SlappyTheFish

  4. 1

    Vous pourriez peut-être de supprimer la classe que vous avez ajouté lorsque vous passez la souris sur les liens, comme ceci:

    $('#bar').click(function() {
  $('#foo a').css('color', 'red');
});
$('#foo').hover() {
  $'#foo a').removeCss('color', 'red');
});

    [EDIT]: Vous devrez peut-être ajouter une instruction if pour voir si la classe est là en premier lieu.

    merci mon ami, che de la solution fonctionne, mais j'ai essayé de faire ce que vous avez dit avant, j'ai vu votre et ses réponses 🙂

    OriginalL'auteur BBetances

  5. 0

    Un autre méchant moyen de le faire à l'aide de Javascript est de vider le conteneur de l'élément et de le remplir à nouveau avec le contenu et la configuration de l'événement click de nouveau. Ce qui détruit tous les états et les événements de sorte qu'ils ont à nouveau le programme d'installation, mais pour des choses simples qui ne contiennent d'énormes quantités de données, il fonctionne!

    - Je l'utiliser pour Nav menu qui utilisent le :hover classe.

    $('#page_nav ul').click(clearNavMenu_Hover);

function clearNavMenu_Hover() {
    var tmpStore=$('#page_nav').html();
    $('#page_nav').empty();
    $('#page_nav').html(tmpStore);
    $('#page_nav ul').click(clearNavMenu_Hover);
}

    OriginalL'auteur Jamie Dean