birleştirin: CSS içinde <code>:hover</code> (veya başka bir sözde seçicisi) ile <code>:after</code> birleştirmek istediğiniz

Question

hover: ile sonra. Ben temelde bir liste ve selected sınıf :after kullanılarak uygulanan bir ok şekline sahiptir ile öğesi vardır. Aynı şeyin üzerinde durmakta olan nesneler için de geçerli olmasını istiyorum ama işe yaramıyor. İşte kod

#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

Sadece #alertlist li:hover seçicinin size #alertlist li.selected seçici ile yapmak aynı şekilde :after ekleyin: SCSS içinde

#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

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

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

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