Chcę łączyć :after
z :hover
w CSS (lub innym pseudo selektorze). Zasadniczo mam listę, a element z selected
klasą ma zastosowany kształt strzałki za pomocą :after
. Chcę, aby tak samo było w przypadku obiektów, nad którymi się znajdujesz, ale nie mogę sprawić, by działały. Oto 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>
css
css-selectors
pseudo-element
Chris
źródło
źródło
Odpowiedzi:
Po prostu dołącz
:after
do#alertlist li:hover
selektora w taki sam sposób, jak w przypadku#alertlist li.selected
selektora:źródło
:after:hover
w przeciwieństwie do tego, czego prawdopodobnie próbowałeś wcześniej, było:hover:after
. Tak właśnie zrobiłem na początku, co frustrująco nie działa:hover
pseudoklasą.w scss
źródło
jsFiddle Link
źródło