Combiner: après avec: survoler

176

Je veux combiner :afteravec :hoveren CSS (ou tout autre pseudo sélecteur). J'ai essentiellement une liste et l'élément avec la selectedclasse a une forme de flèche appliquée à l'aide de :after. Je veux que la même chose soit vraie pour les objets qui sont survolés mais qui ne peuvent pas tout à fait le faire fonctionner. Voici le code

#alertlist
{
    list-style:none;
    width: 250px;
}
#alertlist li
{
    padding: 5px 10px;
    border-bottom: 1px solid #e9e9e9;
    position:relative;
}
#alertlist li.selected, #alertlist li:hover
{
    color: #f0f0f0;
    background-color: #303030;
}

#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

<ul id="alertlist">
    <li>Alert 123</li>
    <li class="selected">Alert 123</li>
    <li>Alert 123</li>
</ul>

css css-selectors pseudo-element

— Chris
source

Avez-vous essayé d'ajouter la règle #alertlist li: hover: after?

— Andrea

Réponses:

225

Ajoutez simplement :afterà votre #alertlist li:hoversélecteur de la même manière que vous le faites avec votre #alertlist li.selectedsélecteur:

#alertlist li.selected:after, #alertlist li:hover:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

— BoltClock
source

@Chris, ce que vous avez probablement essayé auparavant était :after:hover par opposition à :hover:after. C'est ce que j'ai fait au départ qui ne fonctionne pas de manière frustrante

— WickyNilliams

@WickyNilliams: C'est par conception (pseudo-éléments vs pseudo-classes) - voir stackoverflow.com/questions/5777210

— ...

Cela ne semble pas fonctionner pour la décoration de texte dans Chrome (v43) ni dans FF (v38).

— geoidesic

@geoidesic: les décorations de texte sont un tout autre problème. Ils ne jouent surtout pas bien avec le positionnement absolu. Rien à voir avec les pseudo-éléments ou la :hoverpseudo-classe.

— BoltClock

@BoltClock Je n'utilise pas le positionnement absolu mais bien que je puisse changer la couleur de my: après le contenu en utilisant la syntaxe de sélection ci-dessus, je ne suis pas en mesure de changer la décoration de texte pour l'état de survol d'un élément: after sur un lien . Sinon, la décoration de texte fonctionne très bien.

— geoidesic

en scss

&::after{
content: url(images/RelativeProjectsArr.png);
margin-left:30px;
}

&:hover{
    background-color:$turkiz;
    color:#e5e7ef;

    &::after{
    content: url(images/RelativeProjectsArrHover.png);
    }
}

— Erez Lieberman
source

 #alertlist li:hover:after,#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

jsFiddle Link

— Kishore Kumar
source

li: hover: afte ajouter ceci dans la même classe que celle sélectionnée

— Kishore Kumar