Changer le texte et le lien de couleur à l'intérieur de la liste d'éléments sur le vol stationnaire

J'ai une liste ordonnée comme ce

<ol class="tracklist">
    <li>
        <a href="www.html">LINK</a>
        <span>some text</span>
     </li>
</ol>

Je veux changer la couleur de la liste des numéros de lien et de durée sur le curseur sur l'élément de la liste.

Donc j'ai cela en css:

ol.tracklist li:hover {
    background-color: #D21600;
    color: #FFFFFF;
}

Il modifie uniquement la liste des numéros et de la durée de la couleur.

Ce que je peux faire à ce sujet (sans utiliser de JS).

Je devine ol.strackslist est juste une faute de frappe dans votre question...
oui, j'ai corrigé.

OriginalL'auteur Hedge | 2011-06-16

  1. 6

    D'ancrage des balises de ne pas hériter des attributs tels que color lorsque le href attribut est présent.

    Vous pouvez utiliser plusieurs sélecteurs d'appliquer le même style, les séparer par une virgule.

    ol.tracklist li:hover, ol.tracklist li:hover a {
    background-color: #D21600;
    color: #FFFFFF;
}
    Les œuvres merveilleuses. Pourriez-vous expliquer pourquoi ce sélecteur s'applique à la fois?
    <a> étiquettes ne pas hériter des attributs tels que color lorsqu'un href est présent. Plus d'infos dans cette réponse.
    La raison technique des ancres avec href attributs ne pas hériter color de leurs parents est parce que les navigateurs définir une couleur par défaut pour a:link et des amis, et ces préséance et de leurs styles de remplacer les hérité de styles.

    OriginalL'auteur Town

  2. 3

    Il semble que vous avez un peu d' s en vous styles

    Changement ol.strackslist à ol.tracklist dans votre css et ça marche.

    Vous devez également ajouter ce pour le lien pour changer de couleur:

    ol.tracklist li:hover a, ol.tracklist li a:hover {
    color:#fff;
}

    http://jsfiddle.net/jasongennaro/mje9t/1/

    Que seules les modifications de la couleur du lien lorsque la souris est sur le lien, je suppose que c'est pas ce qui est nécessaire.
    Bon point @Ville. J'ai ajouté ol.tracklist li:hover a de faire ce changement.

    OriginalL'auteur Jason Gennaro

  3. 1

    On peut restaurer la couleur de l'héritage sur <a> aussi:

    ol.tracklist li a {
    color: inherit;
}

    <a> se comporte comme tous les autres éléments par la suite. Plane sur <li> va changer sa couleur.

    OriginalL'auteur Laurent CAPRANI