web-dev-qa-db-fra.com

Puis-je appliquer un pseudo-sélecteur: hover avec le balisage CSS MOINS?

En MOINS, je peux appliquer deux règles comme celle-ci pour affecter le style du texte des liens afin de masquer le soulignement, sauf si vous les survolez:

.read-more
{
    a
    {
        text-decoration:none;
    }
    a:hover
    {
        text-decoration:hover;
    }
}

Mais je pense que je devrais également pouvoir définir deux règles comme celle-ci:

.reverseHover
{
    text-decoration:none;
}

.reverseHover:hover
{
    text-decoration:hover;
}

Et puis utilisez un mixin pour obtenir les deux règles:

.read-more{
    a
    {
        .reverseHover;
    }
}

Sans avoir à faire explicitement quelque chose comme ça:

.read-more{
    a{
        .reverseHover;
    }
    a.reverseHover:hover
    {
        .reverseHover;
    }
}

Est-ce possible?

29
cwd

Vous pouvez référencer le sélecteur parent en utilisant &. Vous pouvez même utiliser un sélecteur parent dans un mixage. La documentation se trouve à lesscss.org . Voici la solution.

.reverseHover {
    text-decoration:none;
    &:hover { text-decoration:underline; }
}
.read-more
{
    a
    {
        .reverseHover
    }
}
65
Daniel Moses