The reason is that the pieSliceRed
(the container for the .pie-div) is covering the pie-div contained in the pieSliceRed
container, thus catching the hover event.
Since your solution most definately needs CSS3 support you can use pointer-events to bypass this behaviour. Try defining your css for the pieSliceRed this way instead:
#pieSliceRed {
pointer-events: none;
-webkit-transform:rotate(220deg);
-moz-transform:rotate(220deg);
-o-transform:rotate(220deg);
transform:rotate(220deg);
}
You can read more about the pointer-events
here.