small css question

[freenity]

Hi css guru

Here is my question:

 

#btn1:hover #popup
{
background: #ff0000;
}

 

Why this doesn't work???

This should change the background color of div id=popup when the mouse is over the div id=btn1

 

 

[freenity]

This is the complete code:

 

<script>

var isIE = document.all;
var mouseX = 0;
var mouseY = 0;

function getMouseXY(e)
{ 
  if (!e) e = window.event;
  if (e)
  { 
  	mouseX = isIE ? (e.clientX + document.body.scrollLeft) : e.pageX;
  	mouseY = isIE ? (e.clientY + document.body.scrollTop) : e.pageY;
  }
}

document.onmousemove = getMouseXY;

function showpopup(e)
{
if (e.pageX || e.pageY)
{
	document.getElementById('popup').style.top = mouseY+20;
	document.getElementById('popup').style.left = mouseX+20;
}
}
</script>




<style>
#btn1
{
width: 300px;
height: 50px;
position: absolute;
top: 100px;
left: 50px;
background: #eeeeee;
z-index: 22;
}

#popup
{
width: 200px;
height: 200px;
z-index: 999;
background: #ee8888;
border: 1px solid #222222;
position: absolute;
top: 1px;
left: 1px;
visibility: visible;
}

#btn1:hover #popup
{
background: #ff0000;
}
</style> 


<div id="btn1" onmousemove="showpopup(event)"></div>
<div id="popup"></div>

[freenity]

got it

 

just changed popup to be inside the btn1 div, it worked BUT only in FF.

IE doesnt detecting it.

 

Any idea/??