Поєднати: після з: навести курсор

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
джерело

@Chris, те, що ти, напевно, намагався раніше, було :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 Посилання

— Кішор Кумар
джерело

li: hover: afte додайте це до того ж класу, що і вибраний

— Kishore Kumar