Объединить: после с: hover

176

Я хочу совместить :afterс :hoverCSS (или любой другой псевдо-селектор). У меня в основном есть список, и элемент с 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>

css css-selectors pseudo-element

— Крис
источник

Вы пытались добавить правило #alertlist li: hover: after?

— Андреа

Ответы:

225

Просто добавьте :afterваш #alertlist li:hoverселектор так же, как вы делаете это с вашим #alertlist li.selectedселектором:

#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
источник

@ Крис, то, что вы, вероятно, пробовали ранее, было :after:hover в отличие от :hover:after. Это то, что я сделал изначально, что разочаровывающе не работает

— WickyNilliams

@WickyNilliams: Это по дизайну (псевдо-элементы против псевдо-классов) - см stackoverflow.com/questions/5777210/...

— BoltClock

Похоже, что это не работает для оформления текста в Chrome (v43) и в FF (v38).

— геоидезическая

@geoidesic: Украшения текста - это совсем другая проблема. Особенно они плохо играют с абсолютным позиционированием. Ничего общего с псевдоэлементами или :hoverпсевдоклассом.

— BoltClock

@BoltClock Я не использую абсолютное позиционирование, но хотя я могу изменить цвет моего: после содержимого с использованием приведенного выше синтаксиса селектора, я не могу изменить оформление текста для состояния наведения элемента: after в ссылке , В противном случае текстовое оформление работает просто отлично.

— геоидезическая

в scss

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

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

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

— Эрез Либерман
источник

 #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

— Кишоре Кумар
источник

li: hover: afte добавьте это в том же классе, что и выбранный

— Кишоре Кумар