CODEWITHSUNDEEP
css
Martin Čuka
Martin Čuka

Reputation: 18468

css :hover effect on current and all elements above

Is there any way to style this list using pure css so all elements above my cursor will be highlighted ?

<ul>
    <li>first</li>
    <ul>
        <li>first.first</li>
        <ul>
            <li>first.first.first</li>
            <li>second.second.second</li>
            <li>third.third.third</li>
        </ul>
        <li>second.second</li>
        <li>third.third</li>
    </ul>
    <li>second</li>
    <li>third</li>
</ul>

I want to style this list this way: When I hover cursor over "second" everything will be highlighted expect third. When i go over third.third everything will be highlighted expect second and third etc...

I was able to achieve something very similar as described here css :hover effect on current and previous elements however I want something slightly different

Thanks

Upvotes: 1

Views: 502

Answers (1)

antejan
antejan

Reputation: 2624

We can't go back, but we can go forward with ~, so we can highlight everything and turn off highlight for everything after current element.

ul li:hover {
    background: red;
}
ul li:hover ~ li,
ul li:hover ~ li li {
    background: none;
}

JSFiddle

Upvotes: 1

Related Questions