Kombinieren: nach mit:

Question

schwebt Ich mag :after mit :hover in CSS kombinieren (oder einem anderen Pseudo-Selektor). Ich habe im Grunde eine Liste und das Element mit der selected Klasse hat eine Pfeilform, die mit :after angewendet wird. Ich möchte, dass das Gleiche für Objekte gilt, über die man schwebt, aber das kann nicht funktionieren. Heres der 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> 

Answer 1

Nur :after zu Ihrem #alertlist li:hover Selektor anhängen auf die gleiche Weise mit Ihrem #alertlist li.selected Wähler tun:

#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: ""; 
} 

Answer 2

#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

Answer 3

in SCSS

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

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

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