I changed up your CSS a little bit. Basically to make it bigger.
The order is important here.
This is not perfect due to the outer div's border.
<style>
div {
border:1px dotted black;
font-family:Courier;
background:white;
}
div#top, div#bottom {
height: 200px;
width: 200px;
}
div#outer:hover #bottom:hover {
background:blueviolet;
}
div#outer:hover #top {
background:green;
}
div#outer #top:hover{
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
</style>