Javascript-форум - С какой стороны заходит мышь!

попробовал сделать на css (просто захотелось :-))
чтобы сторона с которой зашла мышь подсвечивалась
не будет только работать в IE < 10

<!DOCTYPE HTML>
<html>
<body>   
<style>
.main {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
  margin: 30px;
}

div  div {
  width: 70px;
  height: 70px;
  position: absolute;
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 0% 0%;
  -moz-transform: rotate(45deg);
  -moz-transform-origin: 0% 0%;
  -o-transform: rotate(45deg);
  -o-transform-origin: 0% 0%;
  -ms-transform: rotate(45deg);
  -ms-transform-origin: 0% 0%;
  transform: rotate(45deg);
  transform-origin: 0% 0%;
}

.top { left: 50px; top: -50px; }
.right { left: 100px; top: 0; }
.bottom { left: 50px; top: 50px; }
.left { left: 0; top: 0; }

div div:hover {
  background-color: red;
  border: 71px solid white;
  z-index: 1;
}

.top:hover { top: -150px; }
.right:hover { top: -100px; left: 100px; }
.bottom:hover { top: -50px; }
.left:hover { top: -100px; }

</style>

<div class="main">
  <div class="top"></div>
  <div class="right"></div>
  <div class="bottom"></div>
  <div class="left"></div>
</div>
 
</body>
</html>