css hover different element change.

[jacobus]

I just started with the whole webdesign thing and can't figure something out.
As I have just created a menu and submenu, I'd like to make the following possible:

when hover the submenu, make the initial image link move, like it does when hovering the initial image link.

the corresponding html:

<ul id="listpartners"><li><a id="partners" href="partners.html"><span>partners</span></a>
	<ul>
	<li><a class="submenu" href="andries.html"><img class="submenu" src="./images/partner_andries.jpg" /></a></li>
	<li><a class="submenu" href="ebo.html"><img class="submenu" src="./images/partner_ebo.jpg" /></a></li>
	<li><a class="submenu" href="harm.html"><img class="submenu" src="./images/partner_harm.jpg" /></a></li>
	</ul>
</ul>

the corresponding css:

#partners{
display: inline-block;
width:96px;
height: 30px;
background: url("./images/partners.jpg") no-repeat 0 0;
}
#partners:hover{
background-position: 0 -28px;
}
#partners span{
display: none;
}

img.submenu{
	border:none;}

#listpartners{
display: inline-block;
margin-top:-30px;
margin-left:-25px
}

#listpartners li{
	display: inline-block;
	list-style-type:none;
	margin: 0px;
	padding: 0px;
	position: relative;
}

#listpartners ul{
	padding:0;
	margin:0;}

#listpartners li ul{
	visibility: hidden;
	position: absolute;
}

#listpartners li:hover ul{
	visibility:visible;
	background-color:#5986ac;
}

So I am in search for the command that:
#listpartners li:hover ul

will as well activate:
#partners:hover{
background-position: 0 -28px;}

Any help? Thanks in advance.

[chrishirst]

To affect other elements with CSS pseudo class rules they MUST be a child of the element the rule is applied to.

You will have to use the javascript onmouseover, onmouseout events to effect the changes.

[jacobus]

Thanks. Maybe you can help me out though.

Right now I fixed the mouseover on the submenu links. But what is the exact command when in the submenu onMouseover is found true, that this one element moves by -28px? How do I name this element?

Here is my java now:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
if (document.images) {
plaatje1on = new Image();
plaatje1on.src = "images/partner_andries1.jpg";
plaatje2on = new Image();
plaatje2on.src = "images/partner_ebo1.jpg";
plaatje3on = new Image();
plaatje3on.src = "images/partner_harm1.jpg";
plaatje1off = new Image();
plaatje1off.src = "images/partner_andries.jpg";
plaatje2off = new Image();
plaatje2off.src = "images/partner_ebo.jpg";
plaatje3off = new Image();
plaatje3off.src = "images/partner_harm.jpg";}
function muisop(imgname) {
if (document.images) {
document[imgname].src = eval(imgname + 'on.src');}}
function muisaf(imgname) {
if (document.images) {
document[imgname].src = eval(imgname + 'off.src');}}
// -->
</SCRIPT>

And the corresponding HTML:

<ul id="listpartners"><li><a id="partners"><span>partners</span></a>
	<ul>
	<li><a class="submenu" HREF="andries.html" onMouseover="muisop('plaatje1'); return true" onMouseout="muisaf('plaatje1');"><IMG SRC="images/partner_andries.jpg" NAME="plaatje1" ALT="" WIDTH="96" HEIGHT="30" BORDER=0></a></li>
	<li><a class="submenu" HREF="ebo.html" onMouseover="muisop('plaatje2'); return true" onMouseout="muisaf('plaatje2');"><IMG SRC="images/partner_ebo.jpg" NAME="plaatje2" ALT="" WIDTH="96" HEIGHT="30" BORDER=0></a></li>
	<li><a class="submenu" HREF="harm.html" onMouseover="muisop('plaatje3'); return true" onMouseout="muisaf('plaatje3');"><IMG SRC="images/partner_harm.jpg" NAME="plaatje3" ALT="" WIDTH="96" HEIGHT="30" BORDER=0></a></li>
	</ul>

And the corresponding css to #partners:
#partners{
display: inline-block;
width:96px;
height: 30px;
background: url("./images/partners.jpg") no-repeat 0 0;
}
#partners:hover{
background-position: 0 -28px;
}
#partners span{
display: none;
}

So how do i tell JAVA to act like the hover function in the CSS?

[chrishirst]

javascript NOT JAVA

document.getElementById("partners").style.backgroundPosition = '0 28px';