Problem changing background image in layer

layer has an image and that should change on mouse over

[itsbee]

Hi,

I am building a new website.
It is build with css and it all functions good.

On right top side I have created a layer with a background image.
On top of that is a layer that handles all the links.

I know how to change the images and backgroundimages of the link.
But my customer wants me, to change the image of the lower layer, if someone is hovering over a link.

<>
The area that must chance is that of the Lamp.

As an in between step, I tried to make the layer itself change the image, if you go with your mouse over the layer.
But it only shows up in Firefox. IE does not know what todo I guess.

Here is the css. The change is in #lampcontainer, #lampcontainer:link

Anybody here who can point me in the good direction?
I am reasonable athome in ASP and CSS.

Greetings,

RobB

<style type="text/css" media="screen">
#lampcontainer, #lampcontainer:link {
width: 234px;
height: 250px;
background-color: #8b0000;
position: absolute;
right: 20px;
top: 10px;
z-index: 7;
}

#lampcontainer:hover, #lampcontainer:focus {
width: 234px;
height: 250px;
background-color: #cf0000;
position: absolute;
right: 20px;
top: 10px;
z-index: 7;
}
</style>

....

<div id="pagecontainer">
<div id="lampcontainer">
<div id="menu">
<div class="menutext">
<a href="#" class="menulink">Menu 1</a> <br/>
<a href="#" class="menulink">Menu 2</a> <br/>
</div>
</div>
</div>
</body>

[edited by: SuzyUK at 4:05 pm (utc) on Feb. 21, 2008]
[edit reason] Please No URI's, code added [/edit]

[SuzyUK]

Hi itsbee, and Welcome to WebmasterWorld!

so are you saying that you would prefer the background to change by hovering over either of those links? or would you be happy by doing on div:hover like you are..

it's only IE6 and below that does not support :hover on elements other than an <a> but there are workarounds for that if the div:hover is easier

the main problem I see is that you cannot target the parent of an element, so the link cannot target the parent div to effect a rollover that way. let us know which method you would prefer

-Suzy

[itsbee]

Well,
First, I saw what you edited in my post. I've got the message. Thank you. ;-)

Option 1
I have an image in: <div id="lampcontainer">
On top of that lampcontainer I have: <div id="menu"> and <div class="menutext">. I have done that so I can place the menupart somewhere in that lampcontainer, where it is needed.

The idea was that as soon as I hover over the links [exp;: <a href="#" class="menulink">Menu 1</a> <br/> that another image is showed in the lampcontainer. 3 layers lower so to speak off.
I have been looking to arrange that, but could not find a way.

Option 2
What you did see in the code was that I tried a hover over the
lampcontainer as another option, but that does not work in IE 6 and 7. And you stated that too.

I would prefer a solution for option 1, but if that is not possible, then I would like a solution for option 2.

I hope you understand what I mean, as English is not my motherlanguage.

Greetings,

RobB