If you want to use JS/Jquery you could achieve what you want this way:
$(".containerLeft").hover(function() {
$(".ui-widget-content").addClass("hover_class");
}, function() {
$(".ui-widget-content").removeClass("hover_class")
});
Then just replace all 4 of your CSS selectors that look like this:
.container:hover #position9 {
outline:2px solid #CFF;
}
...
with this:
.hover_class {
outline:2px solid #CFF;
}
Here is a fiddle of it in action: http://jsfiddle.net/tMzMN/9/
Also, and don't quote me on this, using the Jquery method above will probably have a greater level of backwards compatibility with older browsers as opposed to any CSS tricks you find. I could be wrong and there may very well be something that plays nice with IE<9 but I'm not sure...