[Solved] Change UL background, on LI hover

[ckubs]

Is there any way I can achieve something like this?

Let-s say I have a menu:
<ul class="menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

When I hover the first li element( or when it’s active) to change the whole ul background to other color, when I hover the second li element to other color … so on?

Thank you for any advice.

[Ilan Firsov]

AFAIK with CSS only it can be rather ‘hackey’. If you need something a little more complex you’d better off with JS.

http://codepen.io/ilanf/pen/dPXWQm

[Paulie_D]

It’s not a hack…that’s a perfectly acceptable method until (or if) they ever get the “parent selector” completed.

Other than that, as you say, Jquery is perfect for this.

[ckubs]

Ok, many thanks. I will try this first :D

[ckubs]

I’m not that good at jquery and I thougt it can be done with css only too.

The Ilan solution is good but I hope to achieve the menu background only when I hover the li element, not the whole menu too.

[Ilan Firsov]

Looks like the forum swallowed my post.
In any case, this is where the CSS method is limited.
With jQuery it’s not that complicated:
http://codepen.io/ilanf/pen/jErLNG

You just have to style the .hovered class with CSS

*this can even be done without jQuery, but with pure JS it adds a few more lines of code

[Paulie_D]

Looks like the forum swallowed my post.

Yeah, it didn’t like the JS/JQ embedded in the post.

[ckubs]

Yeey. That is what I need. Problem solved :D

[Author]

Posts