Я хочу совместить :after
с :hover
CSS (или любой другой псевдо-селектор). У меня в основном есть список, и элемент с selected
классом имеет форму стрелки, примененную с помощью :after
. Я хочу, чтобы то же самое относилось к объектам, которые были наведены, но не могли заставить его работать. Вот код
#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>
Ответы:
Просто добавьте
:after
ваш#alertlist li:hover
селектор так же, как вы делаете это с вашим#alertlist li.selected
селектором:источник
:after:hover
в отличие от:hover:after
. Это то, что я сделал изначально, что разочаровывающе не работает:hover
псевдоклассом.в scss
источник
jsFiddle Link
источник