Combinar: depois com: pairar

176

Eu quero combinar :aftercom :hoverCSS (ou qualquer outro pseudo-seletor). Basicamente, tenho uma lista e o item da selectedclasse tem uma forma de seta aplicada :after. Eu quero que o mesmo seja verdadeiro para objetos que estão sendo passados com o mouse, mas que não conseguem fazê-lo funcionar. Heres the 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
fonte

Você tentou adicionar a regra #alertlist li: hover: after?

— Andrea

Respostas:

225

Basta anexar :afterao seu #alertlist li:hoverseletor da mesma maneira que faz com o #alertlist li.selectedseletor:

#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
fonte

@ Chris, o que você provavelmente já tentou anteriormente foi :after:hover o contrário :hover:after. Isto é o que eu tinha, inicialmente, que frustrantemente não funciona

— WickyNilliams

@WickyNilliams: Isso é por design (pseudo-elementos x pseudo-classes) - consulte stackoverflow.com/questions/5777210/…

— BoltClock

Isso não parece funcionar para a decoração de texto no Chrome (v43) nem no FF (v38).

— Geoidesic

@geoidesic: as decorações de texto são uma questão completamente diferente. Eles especialmente não jogam bem com posicionamento absoluto. Nada a ver com pseudo-elementos ou com a :hoverpseudo-classe.

— BoltClock

@BoltClock Não estou usando posicionamento absoluto, mas, embora possa alterar a cor do meu conteúdo: after, usando a sintaxe do seletor acima, não sou capaz de alterar a decoração do texto para o estado de foco de um elemento: after em um link . Caso contrário, a decoração de texto funciona muito bem.

— Geoidesic

em scss

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

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

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

— Erez Lieberman
fonte

 #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
fonte

li: hover: afte adicione isso na mesma classe que a selecionada

— Kishore Kumar