Esto se puede hacer bien vía DOM o vía CSS, usemos CSS.
#box {
width: 100px; height: 100px; background: red;
}
#link1:hover #box {
background: blue;
}
#link2:hover #box {
background: green;
}
#link3:hover #box {
background: black;
}
Y el HTML
<head>
...
</head>
<body>
<div id="box"> Box Contents </div>
<a id="link1" href="">Texto</a>
<a id="link2" href="">Texto</a>
<a id="link3" href="">Texto</a>
</body>
Listo. Esto se basa en la clase :first-child, sería algo así:
PARENT:hover CHILD {
property: value;
}
PS:
Yo he cambiado el color de fondo, tu puedes poner un url('imagen.extension'); en lugar del color. El color/imágen predeterminado es el que lleva el selector 'box'. No he probado el código, pero debería funcionar.
PSS: Y como me aburro, versión javascript:
<head>
...
</head>
<body>
<div id="box" style="background: red"> Box Contents </div>
<a onmouseover="document.getElementById('box').style.background = 'blue';" onmouseout="document.getElementById('box').style.background = 'red';" href="">Texto</a>
<a onmouseover="document.getElementById('box').style.background = 'green';" onmouseout="document.getElementById('box').style.background = 'red';" href="">Texto</a>
<a onmouseover="document.getElementById('box').style.background = 'black';" onmouseout="document.getElementById('box').style.background = 'red';" href="">Texto</a>
</body>
No hace falta que diga que tampoco lo he probado, no? En este último puedes prescindir de la CSS, la he metido dentro de los elementos.
