Hovering on a link to change background image

[nummelin]

Hello I’m new here and few months old in the HTML and CSS world.

I’m working on my website and I’m stuck at this point about hovering and changing background.

This is the page how it looks like at the moment.

http://www.lorenzomeschini.com/architecture/barcelona

I’m trying to make that when the mouse hover the different links in the menu, the vertical sidebar (the background of the menu) get a different background for every links.

Here I give you a “clean” version of my html and css.

http://jsfiddle.net/daFDn/1597/

I would really appreciate if someone could help me.

[Paulie_D]

So as I understand it you want each list item (when you have created them) to have a different background?

Is that right? Or just when hovered?

http://codepen.io/anon/pen/xoedp

[nummelin]

I want that when I hover the different list item (thank you for the hint) I see a different background-image under the whole menu (sidebar), not just the single item.

Like when I hover item A, I see picture 1 hovering item B, picture 2,…..

[Paulie_D]

Ah…you can’t do that with CSS as there is no parent selector.

You can do it with Javascript / Jquery though.

[nummelin]

You mean that a child element cannot change the parent item background?

what about this exemple found in the other topic?
http://jsfiddle.net/daFDn/4/

What is the difference?
thx

[Paulie_D]

That’s not changing the background of the ul it’s changing the background of something else but feel free to give it a try if it suits your needs.

[nummelin]

Well I did tried and I got stuck, I’m not sure if it’s possible to use that method or is me that I’m applying it in the wrong way, that’s why I’m asking here.

Do you have any suggestions about javascript or jquery?

[lukefrake]

Hey Nummelin,

I have done this for you, I think it should be what you want, might not be the cleanest bit of jQuery but might give you some ideas going forward.

http://codepen.io/lukefrake/pen/IjCEt

[nummelin]

Thank you lukefrake!

Looks exactly what I was trying to do, I just dont know why when I copy my html,css and js into CodePen everything works fine, and when I try to preview on google Chrome (or just upload everything on my ftp) it doesnt work.

http://codepen.io/nummelin/pen/kzaso

[Author]

Posts