Div transparent for events

Question

I have four div squares in a grid and fifth one overlaying them, in the center:

fiddle http://jsfiddle.net/TLFJh/

HTML:

<div class="wrapper">
    <div id="info">info</div>
    <div id="inn1"></div>
    <div id="inn2"></div>
    <div id="inn3"></div>
    <div id="inn4"></div>
</div>

CSS:

div.wrapper {
    position: relative;
    width:200px;
    height:200px;
}

#inn1, #inn2, #inn3, #inn4 {
    width:100px;
    height:100px;
    float:left;
}
#inn1 { background: blue; }
#inn2 { background: red; }
#inn3 { background: green; }
#inn4 { background: yellow; }

#info {
    position:absolute;
    width:100px;
    height:100px;
    top:50px;
    left:50px;
    border: 1px solid black;
    box-sizing: border-box;
}

With jQuery, I want to bind mouseover() event to the four squares (easy), but I want that they catch the event even if the pointer is over the info box (the box is somehow "transparent" for the events"). Is it possible?

Edit:

the goal is that I display some information pop-up, different for each #inn that follows the pointer, and the pop-ups should be also displayed when the cursor is over info but as it was over inn.

Answer 1

The only thing that comes to mind is to compare mouse' position and block's position. Here is fiddle.